要在Angular中创建一个表格并显示嵌套数组的内容,可以使用ngFor
指令来循环遍历数组并显示每个元素的属性。以下是一个示例解决方案:
在组件的类中定义一个嵌套数组:
export class AppComponent {
nestedArray = [
{ name: 'Item 1', nestedItems: ['Subitem 1', 'Subitem 2', 'Subitem 3'] },
{ name: 'Item 2', nestedItems: ['Subitem 4', 'Subitem 5', 'Subitem 6'] },
{ name: 'Item 3', nestedItems: ['Subitem 7', 'Subitem 8', 'Subitem 9'] }
];
}
在组件的模板中使用ngFor
循环遍历嵌套数组并创建表格:
Name
Nested Items
{{ item.name }}
- {{ nestedItem }}
在上面的示例中,我们使用ngFor
指令通过nestedArray
循环遍历每个项目,并在表格中显示项目的名称和嵌套项。嵌套项使用嵌套的ngFor
指令在一个ul
列表中进行循环遍历。
运行该应用程序,您将看到一个表格,左列显示名称,并使用嵌套的ngFor
循环遍历每个项目的嵌套项并在列表中显示出来。