Iterate through an object key in Angular 8

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>

to run loop using `*ngFor` you should have array, you can not run loop on object. — Piyush Jain, Feb 26 '20 at 13:54
Does this answer your question? [access key and value of object using \*ngFor](https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor) — Philipp Meissner, Feb 26 '20 at 13:55

score 2 · Accepted Answer · answered Feb 26 '20 at 13:56

2

You can use the KeyValuePipe:

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

Documentation: https://angular.io/api/common/KeyValuePipe

answered Feb 26 '20 at 13:56

József Cserkó

299
2
9

Iterate through an object key in Angular 8

1 Answers1

Linked