本文详解如何将具有父子层级结构的嵌套 JSON 数据（如含 children 数组的父对象）转换为符合 mat-table 要求的扁平化一维数据源，并正确渲染多列（如 Child Name / Parent Name），避免 HTML 结构错位与表头对齐失效问题。

本文详解如何将具有父子层级结构的嵌套 json 数据（如含 `children` 数组的父对象）转换为符合 `mat-table` 要求的**扁平化一维数据源**，并正确渲染多列（如 child name / parent name），避免 html 结构错位与表头对齐失效问题。

在 Angular Material 中， 本质是一个行驱动（row-based）组件：它期望 dataSource 是一个扁平的 Array，每项对应一行；而 每次只渲染一个 row 对象。因此，直接将 parents（含 children 数组的嵌套数组）作为 dataSource 并试图在 内用 *ngFor 渲染多行，会破坏表格 DOM 结构——因为 只能作为 的子元素存在，不能嵌套在 中，否则浏览器会自动修正 DOM，导致表头与单元格错位、样式失效。

✅ 正确解法：预处理数据，实现“嵌套 → 扁平”映射

你需要在组件中将原始嵌套数据转换为“每个孩子一行”的扁平数组，例如：

// component.ts
export class NestedTableComponent implements OnInit {
  displayedColumns = ['childName', 'parentName'];

  parents = [
    {
      name: "Bob",
      children: [{ name: "Mike" }, { name: "Sarah" }]
    },
    {
      name: "Jim",
      children: [{ name: "Eve" }, { name: "Kenny" }, { name: "Brook" }]
    }
  ];

  dataSource: MatTableDataSource;

  ngOnInit() {
    // 关键：扁平化映射 —— 每个 child 生成一条记录，并携带 parent.name
    const flattenedRows = this.parents.flatMap(parent =>
      parent.children.map(child => ({
        childName: child.name,
        parentName: parent.name
      }))
    );

    this.dataSource = new MatTableDataSource(flattenedRows);
  }
}

对应模板即可使用标准 mat-table 语法，简洁清晰、语义正确：

Flowstep

AI界面设计工具，通过对话几秒内创建UI设计图、线框图和流程图

下载

<!-- component.html -->
<mat-table class="mat-elevation-z8"><!-- Child Name Column --><ng-container matcolumndef="childName"><mat-header-cell>Child Name</mat-header-cell><mat-cell row>{{ row.childName }}</mat-cell></ng-container><!-- Parent Name Column --><ng-container matcolumndef="parentName"><mat-header-cell>Parent Name</mat-header-cell><mat-cell row>{{ row.parentName }}</mat-cell></ng-container><mat-header-row></mat-header-row><mat-row row columns: displayedcolumns></mat-row></mat-table>

? 为什么原方案失败？

• 内部插入 违反 HTML 表格规范（ 必须是 或 的直接子元素）；
  Angular Material 的 mat-table 依赖严格的
  → / → → 会导致渲染异常或被浏览器剥离；
  *matRowDef 仅作用于 dataSource 的每一项，无法跨项生成多行。

  ? 进阶提示：

  • 若需支持动态更新（如新增 parent 或 child），请调用 this.dataSource.data = newFlattenedData 后执行 this.dataSource._updateChangeSubscription() 或直接赋值后调用 this.dataSource.renderRows()；
  • 如需保留父子关系用于点击展开/折叠交互，可在扁平数据中额外携带 parentId 或 parentRef 字段；
  • 对于超大数据集（如千级嵌套），建议使用 OnPush 策略 + trackBy 优化性能。

  通过预处理实现数据扁平化，既符合 Angular Material 的设计契约，又保障了可维护性、可测试性与样式一致性——这是构建专业级嵌套表格的最佳实践。

  结构，手动插入