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

Answer 2

The test [object Object] is bcz you are trying to print array without iteration.

To print array of object without iteration we need to either use index to access array value or use json pipe to print object or array of object.

// output: test [ { "asset_id": "asset_id", "asset_name": "asset_name" } ]
test {{ images | json }}

Or access using array index

{{ images[0].asset_id }}
{{ images[0].asset_name }}
...