如何在Angular中实现第三层级嵌套Mat-Table表格网格

你遇到的ExpandedElements报错，核心原因是原有两级嵌套共用了同一个展开状态存储变量，新增第三级时没有区分不同层级的展开元素，导致元素类型匹配错误。按照以下步骤改造即可实现需求： #

改造步骤 #

• 第一步：拆分各层级的展开状态管理
  不要复用同一个展开状态变量存储不同层级的展开项：
  1. 保留原有变量存储一级用户行的展开状态
  2. 新增独立变量（单值或者Set类型，根据是否支持同时展开多个行选择）存储二级地址行的展开状态
• 第二步：新增三级表格的基础配置
  定义评论表格的展示列数组：

  // 评论表展示列
  const commentDisplayColumns = ['commenID', 'comment', 'commentStatus']
  

• 第三步：在二级表格的展开行插槽中新增三级表格渲染逻辑
  逻辑和原有二级表格实现完全一致，仅需要将数据源绑定为当前地址行的comments属性，展开状态绑定你第二步新增的地址行展开状态变量即可：

  <!-- 二级地址表的可展开行插槽 -->
  <div class="detail-row" *matRowDef="let address; columns: ['addressExpandedSlot']">
    <!-- 三级评论表格 -->
    <table mat-table [dataSource]="address.comments" multiTemplateDataRows>
      <!-- 评论ID列 -->
      <ng-container matColumnDef="commenID">
        <th mat-header-cell *matHeaderCellDef>评论ID</th>
        <td mat-cell *matCellDef="let comment">{{comment.commenID}}</td>
      </ng-container>
      <!-- 评论内容列 -->
      <ng-container matColumnDef="comment">
        <th mat-header-cell *matHeaderCellDef>评论内容</th>
        <td mat-cell *matCellDef="let comment">{{comment.comment}}</td>
      </ng-container>
      <!-- 评论状态列 -->
      <ng-container matColumnDef="commentStatus">
        <th mat-header-cell *matHeaderCellDef>评论状态</th>
        <td mat-cell *matCellDef="let comment">{{comment.commentStatus}}</td>
      </ng-container>
  
      <tr mat-header-row *matHeaderRowDef="commentDisplayColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: commentDisplayColumns"></tr>
    </table>
  </div>
  

• 第四步：给二级地址行绑定展开切换事件
  事件逻辑和一级用户行的展开切换逻辑完全一致，点击时判断当前行是否是已展开行，切换对应状态即可。

可选优化 #

如果需要支持同一层级同时展开多个行，可以将各层级的展开状态存储变量从单值改为Set类型，通过set.has()判断行是否展开，set.add()/set.delete()切换展开状态即可，适配性更强。

内容的提问来源于stack exchange，提问作者angular_code