CODEWITHSUNDEEP
angularangular-ngfor
user1187
user1187

Reputation: 2218

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

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:

enter image description here

What is the mistake I am doing here?

Upvotes: 0

Views: 3741

Answers (2)

ng-hobby
ng-hobby

Reputation: 2199

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

Upvotes: 1

Kamran Khatti
Kamran Khatti

Reputation: 4137

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 }}
...

Upvotes: 0

Related Questions