iterate object keys using *ngFor in Angular 10

Question

I want to iterate the "others" with *ngFor I got the "id" and "year" correct but when I try to iterate "others", I got [object object]

 {
        "id": 11,
        "year": [
        2019,
        2020
        ],
        "others": {
        "name": "John",
        "age": "19",
        "work": "yes",
        },
    }

Answer 1

I got it, By using the safe navigation ? So it will be data.others?.name

Answer 2

You can't do string interpolation to call an object, but you should call any single property from the object.

<h1>{{others}}</h1> // output [object object]


// do like this

<h1>{{others.name}}</h1>

And object is not a something that you can iterate

Answer 3

You'll have to add the “key value” pipe for you to be able to use *ngFor with objects.

<div *ngFor="let item of object | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>