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

【问题标题】：Angular Ionic Parsing/Displaying Data based from another Data基于另一个数据的角度离子解析/显示数据
【发布时间】：2020-07-13 23:31:49
【问题描述】：

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

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

这是我的 .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 页面以及更改日期显示格式的好的教程/指南链接。将不胜感激。

【问题讨论】：

你能创建一个 stackblitz 实例吗？或者添加 API 返回的数据？

标签： angular typescript ionic-framework

【解决方案1】：

你需要修改你的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>

【讨论】：

请。现在检查我已经更新了我的答案有小括号错误。
您好，请问有什么方法可以添加 ApiKey 吗？因为我在 Data url 下使用我的 API 链接，它需要 api 密钥才能访问
什么样的钥匙？是否喜欢通过网络调用进行 http 调用的令牌？
它是一个密钥，以便我可以访问 API，但现在可以了，我只是将 prepareDataRequest() 方法替换为我最初用于在控制台日志中测试连接的 GetRemoteData() 方法。谢谢！ :)
如何显示我的订单状态的具体数值？ {{order?.status == ORDER PROCESSED}} 这是正确的格式吗？

【解决方案2】：

在一个类似数组的结构中而不是单独的数组中从 observable 中提取值。在模板中使用此数组与有效值进行数据绑定。

模板文件：

// Array which will have the values of orders.
orders= [];
ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe(
    data => {
      // Takes data into in single Array and print 
      this.orders = 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}`;
    }
  );
}

模板文件

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

【讨论】：