How to get the value of object inside an array by using its key in angular2+

Question

var arr=[
        {Key0: "myValue1"},
        {Key0: "myValue2"},
        {Key0: "myValue3"},
        {Key1: "myValue4"},
        {Key2: "myValue5"}, ]

from the above array, I want to get the values using its key in *ngFor angular, for example, key0 values I want to display along with other values values,

I have also tried like this but can't able to get the desired output

                         <li mat-list-item *ngFor='let C of arr'>
                             {{C}}</li>

Note:

I tried like {{c.key0}} but it prints only key0 values, but here I want all the values like key1,key2

thanks in advance.

Answer 1

As shown in: How to iterate object keys using *ngFor

You can use (angular v6+):

<div *ngFor='let C of arr | keyvalue">
   {{C.key}}:{{C.value}}
</div>

Answer 2

I think you should modify your array in typescript first by using iteration logic. And then show it using *ngFor.