AngularMaterial嵌套表格无法显示嵌套的JSON数据
创始人
2024-10-28 10:01:05
0

要显示嵌套的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

相关内容

热门资讯

wepoke辅助技巧!wepo... 相信很多朋友都在电脑上玩过wEpOke吧,但是很多朋友都在抱怨用电脑玩起来不方便。为此小编给大家带来...
微扑克有辅助挂!微扑克可以在软... 微扑克有辅助挂!微扑克可以在软件内设置(透明挂)一直真的有挂;是一款可以让一直输的玩家,快速成为一个...
四分钟了解!福建十三水app辅... 四分钟了解!福建十三水app辅助器,决战十三水的辅助软件,wpk教程(有挂软件);决战十三水的辅助软...
推荐一款!三哥玩外 挂真的(透... 推荐一款!三哥玩外 挂真的(透明挂)好像真的是有挂(2023已更新)(哔哩哔哩)1、玩家可以在三哥玩...
微扑克辅助器ios!微扑克ai... 微扑克辅助器ios!微扑克ai技术,微扑克一直有挂,规律教程(有挂黑科技)1、快速入门:当你通过点击...
wepoke辅助技巧!wepo... wepoke辅助技巧!wepower有外 挂,wePOke本来真的有挂,wpk教程(有挂解说);we...
四分钟了解!途游有辅助挂是真的... 四分钟了解!途游有辅助挂是真的吗,皮皮跑胡子真的有外挂吗,实用技巧(有挂科普);1、下载好皮皮跑胡子...
热点推荐!桃乐互娱有没有外 挂... 热点推荐!桃乐互娱有没有外 挂(透视)原来存在有挂(2022已更新)(哔哩哔哩);1、打开软件启动之...
微扑克有辅助挂!微扑克挂几个号... 微扑克有辅助挂!微扑克挂几个号,微扑克辅助安卓版本(都是有辅助挂)1、下载好微扑克辅助软件之后点击打...
wepoke透明黑科技!wep... wepoke透明黑科技!wepoke透明挂可以识别(透明挂)德州wepower(就是真的有挂)准备好...