Angular mat-table表格如何在行内插入嵌套子行展示数据

你当前的代码存在两个核心问题，直接导致行展示不全、错位：

• 非法DOM结构：在Areas列的<td>标签内部嵌套了另一个<td mat-cell>，不符合HTML表格的语法规范，浏览器渲染时会自动丢弃、拆分非法嵌套的标签，直接破坏表格行结构。
• 实现逻辑缺陷：你试图在单条区域数据对应的1行内，通过<br>标签堆叠部门、活动内容，但不同列的循环层级不匹配（部门列循环部门、截止日期列循环活动），一旦某个部门下的活动数量和其他列堆叠的行数不一致，就会出现内容错位、显示截断的问题。

Angular Material表格实现区域下部门、活动逐行对齐展示，最稳定的方案是先将嵌套的数据源扁平化，再通过原生表格的rowspan属性合并区域单元格，完全符合表格渲染规则，不会出现布局问题。

步骤1：预处理扁平化数据源 #

在组件TS代码中，将原始嵌套的区域数据转换为逐行对应的扁平化结构，同时计算每个区域单元格需要跨的行数：

// 表格列配置
columns = ['areas', 'sectors', 'activities', 'deadlines'];
// 扁平化后的表格数据源
flattenedTableData: any[] = [];

// 原始嵌套数据（即你之前绑定到dataSource的server数据）加载完成后，执行扁平化处理
formatTableData(originalAreaList: any[]) {
  this.flattenedTableData = [];
  originalAreaList.forEach(area => {
    // 计算当前区域下所有活动的总行数，作为区域单元格的rowspan值
    let areaTotalRows = 0;
    area.sectors.forEach(sector => {
      areaTotalRows += sector.activities.length;
    });

    // 遍历部门、活动，为每个活动生成单独的表格行
    let isAreaFirstRow = true;
    area.sectors.forEach(sector => {
      sector.activities.forEach(activity => {
        this.flattenedTableData.push({
          areaName: area.name,
          areaSpan: isAreaFirstRow ? areaTotalRows : 0, // 仅区域第一行保留跨行列值
          sectorName: sector.name,
          activityContent: activity.activity,
          deadlineDays: activity.deadline
        });
        isAreaFirstRow = false;
      });
    });
  });
}

步骤2：修改表格模板 #

删除原有在单元格内嵌套循环、非法嵌套td的写法，每列直接绑定扁平化后的数据，区域列通过rowspan实现跨多行合并：

<table mat-table [dataSource]="flattenedTableData" class="mat-elevation-z8">
  <!-- Areas列：仅每个区域的第一行渲染单元格，设置跨行列数 -->
  <ng-container matColumnDef="areas">
    <th mat-header-cell *matHeaderCellDef>Areas</th>
    <td mat-cell *matCellDef="let row" 
        [attr.rowspan]="row.areaSpan || null"
        *ngIf="row.areaSpan > 0">
      {{ row.areaName }}
    </td>
  </ng-container>

  <!-- Sectors列 -->
  <ng-container matColumnDef="sectors">
    <th mat-header-cell *matHeaderCellDef>Sectors</th>
    <td mat-cell *matCellDef="let row">
      {{ row.sectorName }}
    </td>
  </ng-container>

  <!-- Activities列 -->
  <ng-container matColumnDef="activities">
    <th mat-header-cell *matHeaderCellDef>Activities</th>
    <td mat-cell *matCellDef="let row">
      {{ row.activityContent }}
    </td>
  </ng-container>

  <!-- Deadlines列 -->
  <ng-container matColumnDef="deadlines">
    <th mat-header-cell *matHeaderCellDef>Deadlines</th>
    <td mat-cell *matCellDef="let row">
      {{ row.deadlineDays }} days
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columns"></tr>
  <tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>

如果你需要让同部门下的多个活动也只显示一次部门名称，可以用和区域列完全相同的逻辑，计算每个部门对应的活动行数作为部门列的rowspan，仅在部门第一行渲染单元格即可。

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