遍历Angular 5中的对象键

Posted 2023-03-13

【中文标题】遍历Angular 5中的对象键

【英文标题】：Iterate through object key in Angular 5

【发布时间】：2020-06-10 10:31:35

【问题描述】：

我有这个对象：

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

【问题讨论】：

你能创建stackblitz吗

创建一个自定义管道，如下所示：***.com/a/35536052/6513921

@MichaelD 很好的解决方案，但我读到它存在性能问题。

能说一下什么样的性能问题吗？

@JózsefCserkó: keyvalue 管道在 Angular 5 中不可用

【参考方案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>

【参考方案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>