在Angular中,可以使用ngFor
指令来遍历对象数组中的对象数组。
首先,确保你已经引入了FormsModule
模块,并在组件的模板文件中添加*ngFor
指令。
假设有以下对象数组数据:
data = [
{ name: 'John', age: 25, hobbies: ['reading', 'gaming'] },
{ name: 'Alice', age: 30, hobbies: ['coding', 'music'] },
{ name: 'Bob', age: 35, hobbies: ['cooking', 'painting'] }
];
在模板文件中,可以使用ngFor
来遍历对象数组中的对象数组。例如,我们想要遍历每个人的兴趣爱好(hobbies):
<div *ngFor="let person of data">
<p>{{ person.name }}:</p>
<ul>
<li *ngFor="let hobby of person.hobbies">{{ hobby }}</li>
</ul>
</div>
上述代码中,外层的ngFor
指令用于遍历对象数组data
中的每个对象,而内层的ngFor
指令则用于遍历当前对象的兴趣爱好数组。
通过这种方式,我们可以逐层遍历对象数组中的对象数组,并将数据展示在页面上。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云