使用 *ngFor (Angular 5) 的 JSON 对象循环

Question

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

[{
  "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"
}]

component.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>

有什么想法吗？

Answer 1

稍微修改了你的代码。

<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"] 一样访问它

希望对您有所帮助！！

Answer 2

您的组件代码需要重构。重构方法如下：

// 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。

使用 *ngFor (Angular 5) 的 JSON 对象循环

Loop of JSON object with *ngFor (Angular 5)

arrays

json

ngfor

angular

angular5