如何创建以嵌套属性为行的mat-table表格

核心思路：扁平化数据源 #

Mat-Table的设计逻辑是每行对应一条独立数据项，你之前用嵌套<tr>的写法会破坏表格DOM结构，导致表头与单元格无法对齐。正确做法是先将嵌套的父子数据转换成扁平化的一维数组，让每个子项携带父项信息，再用标准Mat-Table列定义渲染。

1. 在组件中处理数据 #

使用Array.flatMap将原嵌套数组转换为扁平化结构：

import { Component } from '@angular/core';

@Component({
  selector: 'app-child-parent-table',
  templateUrl: './child-parent-table.component.html'
})
export class ChildParentTableComponent {
  // 原始嵌套数据
  parents = [
    {
      name: "Bob",
      children: [
        { name: "Mike" },
        { name: "Sarah" }
      ]
    },
    {
      name: "Jim",
      children: [
        { name: "Eve" },
        { name: "Kenny" },
        { name: "Brook" }
      ]
    }
  ];

  // 扁平化后的数据源：每个子项包含自身名称和父项名称
  childParentData = this.parents.flatMap(parent => 
    parent.children.map(child => ({
      childName: child.name,
      parentName: parent.name
    }))
  );

  // 定义要显示的列名
  displayedColumns = ['childName', 'parentName'];
}

2. 修改Mat-Table模板 #

直接使用扁平化后的数据源，为每个列定义表头和单元格：

<mat-table [dataSource]="childParentData" class="mat-elevation-z8">
  <!-- 子名称列 -->
  <ng-container matColumnDef="childName">
    <mat-header-cell *matHeaderCellDef>Child Name</mat-header-cell>
    <mat-cell *matCellDef="let item">{{ item.childName }}</mat-cell>
  </ng-container>

  <!-- 父名称列 -->
  <ng-container matColumnDef="parentName">
    <mat-header-cell *matHeaderCellDef>Parent Name</mat-header-cell>
    <mat-cell *matCellDef="let item">{{ item.parentName }}</mat-cell>
  </ng-container>

  <!-- 表头行 -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <!-- 数据行 -->
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

原代码问题分析 #

你之前用colspan合并单元格后嵌套<tr>，完全违背了Mat-Table的渲染逻辑：Mat-Table会根据定义的列自动生成每行的<td>，嵌套的<tr>会脱离表格列结构，导致单元格宽度与表头不匹配，最终出现对齐偏差。

扁平化数据后，每一行都是独立的子项+父项组合，完全符合Mat-Table的设计预期，表头与单元格会自动对齐，同时也能继承应用中已有的Mat-Table样式。

内容的提问来源于stack exchange，提问作者Stephen R Chen