带有 *ngFor 的 JSON 对象循环（Angular 5）答案

【问题标题】：Loop of JSON object with *ngFor (Angular 5)带有 *ngFor 的 JSON 对象循环（Angular 5）
【发布时间】：2019-02-12 01:56:21
【问题描述】：

我想遍历一个对象数组。但我无法循环“购买”。这是我通过控制台得到的结果：

[{
  "createdAt": "Fri Aug 31 2018 15:19:03 GMT-0400 
    (Eastern Daylight Time)
  ", 
  "customer": {
    "address": "test",
    "lastname": "Carrio",
    "name": "Mabel",
    "phone": "786222222"
  },
  "purchases": {
    "0": {
      "product": {
        "categoryS": "-L9QdqynslyGy8Ft1G9z",
        "location": "en tienda",
        "name": "Memoria",
        "price": 12
      },
      "quantity": 3
    }
  },
  "totalPrice": 36,
  "uid": "fr0Yix3T2hMio3KzwAB1r6aJbZA2",
  "$key": "-LLGQAB3V_PRiW2v02bx"
}]

组件.ts

ngOnInit() {
  this.invoiceService.getInvoices().snapshotChanges().subscribe(data => {
      this.invoiceList = []

      data.forEach(element => {
          let x = element.payload.toJSON()
          this.invoiceList.push(x);
        }
      }
    }
  }
}

list.component.html

<tr *ngFor="let invoice of invoiceList">
  <td>{{invoice.customer.name}} {{invoice.customer.lastname}}</td>
  <td>{{invoice.totalPrice}}</td>
  <td>{{invoice.purchases.product.name}}</td>
  <--- Error 
</tr>

有什么想法吗？

【问题讨论】：

您是否正在尝试将购买元素转换为数组？
如果你也重构一下你的模板代码就好了。 :)
参考您在已删除答案中的评论... ngFor 仅支持绑定到数组等可迭代对象... 不正确... 参见 ng6.1 中引入的angular.io/api/common/KeyValuePipe ... 但是如果您严格指的是 v5，则为 true

标签： arrays json angular angular5 ngfor

【解决方案1】：

您的组件代码需要重构。以下是重构它的方法：

// First
import 'rxjs/add/operator/map';

// Then
ngOnInit() {
  this.invoiceService.getInvoices().snapshotChanges()
    .map(data => data.map(datum => datum.payload.toJSON()))
    .map(data => {
      return data.map(datum => {
        let purchases = [];
        for (let key in datum.purchases) {
          purchases.push(datum.purchases[key]);
        }
        datum.purchases = purchases;
        return datum;
      });
    })
    .subscribe(data => this.invoiceList = data);
}

此外，由于按照Object.0 的方式执行操作会引发错误，因此您应该使用数组成员访问模式。您的模板将具有以下内容：

<tr *ngFor="let invoice of invoiceList">
  <td>{{invoice.customer.name}} {{invoice.customer.lastname}}</td>
  <td>{{invoice.totalPrice}}</td>
  <td>{{invoice.uid}}</td>
  <td>{{invoice.createdAt}}</td>
  <td>
    <li class="list-group-item" *ngFor="let purchase of invoice.purchases">
      {{purchase.product.name}}
    </li>
  </td>
  <td>
    <a class="btn btn-danger text-white" (click)="onDelete(invoice.$key)">
      <i class="fas fa-trash-alt"></i>
    </a>
  </td>
</tr>

这是Updated StackBlitz。

【讨论】：

这里只返回位置0的值，可能不止一个
在这种情况下，为什么purchases 不是array？是否有可能将purchases 作为array 而不是键为0、1、2...的对象？如果是，请将其设为数组。
因为“采购”除了“产品”之外，还有“数量”
如果有帮助，请检查更新的答案。你会循环遍历td 元素中的所有购买吗？
错误：找不到类型为“object”的不同支持对象“[object Object]”。

【解决方案2】：

稍微修改了您的代码。

<tr *ngFor="let invoice of invoiceList">
<td>{{invoice.customer.name}} {{invoice.customer.lastname}}</td>
<td>{{invoice.totalPrice}}</td>
<td>{{invoice.purchases["0"].product.name}}</td> //Changes are here

如果对象的键是数字，则必须像 [0] 或 ["0"] 一样访问它

希望有所帮助！

【讨论】：