时间戳

首页 > 解决方案 > 基于另一个数据的角度离子解析/显示数据

angular - 基于另一个数据的角度离子解析/显示数据

问题描述

我正在尝试显示基于另一个数据（订单状态）的数据（日期）。

这是错误的当前输出，因为它显示了每个订单的所有日期。特定日期必须仅打印在每个订单上，而不是全部。

在此处输入图像描述

这是我的 .ts 代码

constructor(private dataService: DataService, private http: HttpClient) {
  this.data = '';
  this.error = '';
 }

public statuses = [];
public dates = [];

private prepareDataRequest(): Observable<any> {  // <-- change return type here
  // Define the data URL
  const dataUrl = '';
  // Prepare the request
  return this.http.get(dataUrl);
}

ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe(
    data => {
      // Set the data to display in the template
      this.statuses = data.output.Result.partsOrderTrackingListSequence
        .map(item => {
          if (item.status && item.status !== '') {
            return item.status;
          } else {
            return '-';
          }
        });
        this.dates = data.output.Result.partsOrderTrackingListSequence
        .map(item => {

          if (item.date && item.date !== '') {
            return item.date;
          } else {
            return '-';
          }
        });
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

我的 page.html 代码

<ng-container *ngIf="!error; else errorContent">
    <p *ngFor="let status of statuses let status of dates">
      {{ status }} - {{dates}}
    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style="color: red;">{{error}}</span>
    </p>
  </ng-template>

抱歉，我是 Angular 和 Typescript 的新手，我正在尝试浏览和搜索可用的指南，但没有运气。如果你能给我任何关于解析 JSON 数据并将其显示到 Angular Ionic 页面以及更改日期显示格式的好的教程/指南链接。将不胜感激。

标签： angulartypescriptionic-framework

解决方案

你需要修改你的ionViewWillEnter() function

OrderList= [];
ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe(
    data => {
      // Takes data into in single Array and print 
      this.OrderList = data.output.Result.partsOrderTrackingListSequence


    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

然后在 HTML

<ng-container *ngIf=""!error; else errorContent"">
    <p *ngFor=""let order of OrderList;"">
      {{ order.status }} - {{order.dates}}
    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style=""color: red;"">{{error}}</span>
    </p>
  </ng-template>

推荐阅读