Iterate through object key in Angular 5

Question

I am having this object:

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

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

How can I iterate through this project in my component Tempate? I tried:

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

In a project that I use Angular 8, keyValue pipeline worked. What can I do here? I am using "target": "es2015".

Create a custom pipe as shown here: https://stackoverflow.com/a/35536052/6513921 — ruth, Feb 26 '20 at 14:17
@MichaelD good solution but as I read it has performance issues. — Kathrine Hanson, Feb 26 '20 at 14:18
@JózsefCserkó: `keyvalue` pipe is not available in Angular 5 — ruth, Feb 26 '20 at 14:20
@MichaelD It creates huge performance bottleneck because it needs to generate the collection every time the change detector checks for changes — Kathrine Hanson, Feb 26 '20 at 14:21
@KathrineHanson: Apart from the answer below, I can't think of any for your object structure. — ruth, Feb 26 '20 at 14:30

score 2 · Answer 1 · answered Feb 26 '20 at 14:42

You are looking for KeyValuePipe, see the detail

Use the same object as you have:

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

Then your 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>

score 1 · Accepted Answer · answered Feb 26 '20 at 14:27

You can also use the keys of your object to loop through:

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>

Iterate through object key in Angular 5

2 Answers2