Angular 9 `*ngFor` not working with `Array` of object

Question

In ts file I have a data like this:

app.component.ts

 this.images = [{
     asset_id: 'asset_id',
     asset_name: 'asset_name'
 }];

and html template is as below:

app.component.html

test {{images}}
<div *ngFor="let img of images; index as i">
  dddd--<span>{{img.asset_id}}</span>
</div>

The result is like the below:

What is the mistake I am doing here?

Answer 1

You have an array of object with one item. So, try this:

id: {{images[0]["asset_id"]}}
name: {{images[0]["asset_name"]}}

<div *ngFor="let img of images">
    <span>{{ img.asset_id  }}</span>
</div>

I created a sample for you here on Stackblitz