[英]Angular 9 `*ngFor` not working with `Array` of object
In ts file I have a data like this:在 ts 文件中,我有这样的数据:
app.component.ts app.component.ts
this.images = [{
asset_id: 'asset_id',
asset_name: 'asset_name'
}];
and html template is as below:和html模板如下:
app.component.html应用程序组件.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?我在这里做的错误是什么?
You have an array
of object
with one item.您有一个包含一个项目的
object
array
。 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我在Stackblitz上为您创建了一个示例
The test [object Object]
is bcz you are trying to print array without iteration. test [object Object]
是 bcz 您试图在没有迭代的情况下打印数组。
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.要在不迭代的情况下打印对象数组,我们需要使用索引来访问数组值或使用
json
管道来打印对象或对象数组。
// 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 }}
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.