遍历Angular 8中的对象键[重复]答案

【问题标题】：Iterate through an object key in Angular 8 [duplicate]遍历Angular 8中的对象键[重复]
【发布时间】：2020-06-10 09:55:53
【问题描述】：

我有这个对象：

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>

【问题讨论】：

使用*ngFor运行循环你应该有数组，你不能在对象上运行循环。
这能回答你的问题吗？ access key and value of object using *ngFor
@piyushjain 你可以使用keyvalue 管道。

标签： angular typescript loops object ngfor

【解决方案1】：

您可以使用 KeyValuePipe：

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

文档：https://angular.io/api/common/KeyValuePipe

【讨论】：