要显示嵌套的JSON数据,需要在Angular Material中使用mat-table和mat-row来嵌套表格。首先,我们需要定义一个包含嵌套数据的数组,如下所示:
export interface Parent {
name: string;
children: Child[];
}
export interface Child {
name: string;
}
在HTML模板中,使用ng-container和MatTableRowDef指令来嵌套表格。 MatCellDef指令用于填充单元格中的数据,并且使用*ngFor指令来循环遍历每个嵌套对象的子元素。 最后,使用数据绑定来显示每个子元素的名称。
Name
{{ element.name }}
Children
Child Name
{{ child.name }}
在组件中,定义一个包含嵌套数据的数组,并将其传递给模板。
export class AppComponent {
displayedColumns: string[] = ['name', 'children'];
data: Parent[] = [
{
name: 'Parent 1',
children: [
{ name: 'Child 1.1' },
{ name: 'Child 1.2' },
]
},
{
name: 'Parent 2',
children: [
{ name: 'Child 2.1' },
{ name: 'Child 2.2' },
{ name: 'Child 2.3' },
]
},
];
}
现在,在HTML