在Angular中,可以使用ngFor
指令来渲染包含数组的对象数组。下面是一个示例代码:
首先,假设我们有一个包含对象数组的组件属性:
@Component({
selector: 'app-example',
template: `
{{ item.title }}
- {{ subItem }}
`
})
export class ExampleComponent {
items = [
{
title: 'Item 1',
subItems: ['SubItem 1', 'SubItem 2', 'SubItem 3']
},
{
title: 'Item 2',
subItems: ['SubItem 4', 'SubItem 5']
},
{
title: 'Item 3',
subItems: ['SubItem 6']
}
];
}
在上面的示例中,我们使用了两个嵌套的ngFor
指令。外部的ngFor
指令用于遍历items
数组,内部的ngFor
指令用于遍历每个item
对象中的subItems
数组。
在模板中,我们使用插值表达式({{ }}
)显示每个item
对象的title
属性,并使用*ngFor
指令遍历subItems
数组并显示每个子项。
这样,我们就可以在页面上渲染包含数组的对象数组。