Iterate through object key in Angular 5

Issue

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

Solution

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>

Answered By – Michael Yimam

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.