遍歷 Angular 5 中的對象鍵

Question

我有這個對象：

protected products: { 
 [key: string]: {
  color: string,
  brand: string,
 };
} = {};

products =  {
 scan12345: {color: "Orange", brand: "X"},
 scan13813: {color: "Pink", brand: "X"},
}

如何在我的組件 Tempate 中迭代這個項目？ 我試過：

<ion-item *ngFor="let pro of products">
   {{ pro.color }}
</ion-item>

在我使用 Angular 8 的項目中，keyValue 管道起作用了。 我能在這里做什么？ 我正在使用“目標”：“es2015”。

Answer 1

您正在尋找KeyValuePipe ，查看詳情

使用與您相同的對象：

products =  {
  scan12345: {color: "Orange", brand: "X"},
  scan13813: {color: "Pink", brand: "X"},
}

然后你的 HTML：

<div *ngFor="let item of products | keyvalue">
      Single Object: {{item.key}}:{{item.value}} <br>
      Color: {{item.value.color}} <br>
      Brand: {{item.value.brand}}
</div>

Answer 2

您還可以使用對象的鍵來循環：

products =  {
  scan12345: {color: "Orange", brand: "X"},
  scan13813: {color: "Pink", brand: "X"},
}
this.productKeys = Object.keys(products);

<ion-item *ngFor="let key of productKeys">
   {{ products[key].color }}
</ion-item>