Итерация по ключу объекта в 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. Что я могу сделать здесь? Я использую "target": "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

Вы также можете использовать ключи вашего объекта для l oop через:

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>