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

相关内容

热门资讯

6分钟攻略!大唐麻将有规律(透... 6分钟攻略!大唐麻将有规律(透视)外挂透视辅助软件(2021已更新)(哔哩哔哩);无聊就玩这款真的有...
一分钟了解(gg扑克软件)软件... 相信很多朋友都在电脑上玩过gg扑克软件吧,但是很多朋友都在抱怨用电脑玩起来不方便。为此小编给大家带来...
教学盘点!智星德州有挂吗(辅助... 您好,智星德州这款游戏可以开挂的,确实是有挂的,需要了解加微【841106723】很多玩家在这款游戏...
7分钟了解!微扑克算正规平台,... 7分钟了解!微扑克算正规平台,德扑线上创建房间反正真的有挂,解密教程(有挂技巧)-哔哩哔哩;实战中需...
两分钟普及!欢乐麻将助手神器,... 两分钟普及!欢乐麻将助手神器,呼包鄂麻将胡一把能操作输赢,详细教程(新版有挂)(1)两分钟普及!欢乐...
玩家必看科普(WPKplus)... 玩家必看科普(WPKplus)外挂透明挂辅助器(透视)透视辅助(2020已更新)(哔哩哔哩)1、让任...
一分钟秒懂!德州aapoker... 一分钟秒懂!德州aapoker俱乐部正确打法,WPK存在原来是真的有挂,解说技巧(有挂详情)-哔哩哔...
玩家必用!aapoker辅助(... 您好,aapoker这款游戏可以开挂的,确实是有挂的,需要了解加微【487309276】很多玩家在这...
十分钟普及!衢州都莱双扣算牌器... 十分钟普及!衢州都莱双扣算牌器,友友邳州麻将胡牌器使用,AA德州教程!(有挂解惑),您好,友友邳州麻...
分享个大家(wepoke计算)... 分享个大家(wepoke计算)外挂辅助工具(辅助挂)科技教程(2025已更新)(哔哩哔哩);科技安装...