Angular mat-table动态绑定分组表头报错：无法找到headerId

开发者阿泽

2026-6-24

问题分析与解决方案

你的代码存在两个核心错误，导致DOM无法找到对应的headerId：

matColumnDef绑定语法错误：当前写法[matColumnDef]="header-row-'+i+'-group'"会将整个字符串字面量作为列名，而非动态拼接出header-row-0-group、header-row-1-group这类目标值，导致与TypeScript中定义的groupHeaderColumns不匹配。
表头单元格指令误用：<th>标签应使用*matHeaderCellDef指令，*matHeaderRowDef是用于定义表头行的指令，仅能放在<tr>标签上，单元格必须通过*matHeaderCellDef才能正确关联到对应的matColumnDef。

修正后的代码

HTML代码

<ng-container *ngFor="let result of headerData; let i = index">
  <ng-container [matColumnDef]="'header-row-' + i + '-group'">
    <th mat-header-cell *matHeaderCellDef 
        [style.text-align]="center"
        [attr.colspan]="result.Count">
      {{result.Name}}
    </th>
  </ng-container>
</ng-container>

<tr mat-header-row *matHeaderRowDef="groupHeaderColumns"></tr>
<tr mat-header-row *matHeaderRowDef="columnNames"></tr>

TypeScript代码（推荐动态生成列名）

// 动态生成groupHeaderColumns，适配headerData的任意长度
this.groupHeaderColumns = this.headerData.map((_, index) => `header-row-${index}-group`);

// 若需硬编码，确保列名与循环生成的完全一致（注意索引起始值）
// this.groupHeaderColumns = ['header-row-0-group', 'header-row-1-group'];