Angular 15.1复用表格公共列报错：Could not find column with id X

解决方案 #

1. 封装共享列组件（推荐，适用于跨组件复用） #

这是最可靠的方式，能确保MatTable正确识别共享列定义。

步骤1：创建共享列组件

创建shared-columns.component.ts文件，定义所有需要复用的列：

import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

@Component({
  selector: 'app-shared-columns',
  template: `
    <!-- 共享列1：ID列 -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let element"> {{ element.id }} </td>
    </ng-container>

    <!-- 共享列2：名称列 -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> 名称 </th>
      <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
    </ng-container>

    <!-- 可添加更多共享列 -->
  `,
  standalone: true, // 若使用独立组件模式需添加此配置
  imports: [MatTableModule]
})
export class SharedColumnsComponent {}

步骤2：在目标表格组件中使用共享列

在需要使用共享列的表格组件模板中，将<app-shared-columns>直接放在<mat-table>内部：

<table mat-table [dataSource]="dataSource">
  <!-- 引入共享列组件 -->
  <app-shared-columns></app-shared-columns>

  <!-- 表格独有的自定义列 -->
  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> 操作 </th>
    <td mat-cell *matCellDef="let element">
      <button mat-button>编辑</button>
    </td>
  </ng-container>

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

步骤3：配置显示列数组

在组件类中定义displayedColumns，包含共享列ID和自定义列ID：

import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { SharedColumnsComponent } from './shared-columns.component';

@Component({
  selector: 'app-example-table',
  templateUrl: './example-table.component.html',
  standalone: true,
  imports: [MatTableModule, SharedColumnsComponent]
})
export class ExampleTableComponent {
  dataSource = [/* 你的数据源 */];
  displayedColumns: string[] = ['id', 'name', 'action']; // 包含共享列和自定义列
}

2. 同一组件内临时测试方案（不推荐跨组件复用） #

如果仅在同一文件内测试，可直接将共享列定义为<mat-table>的直接子元素：

<table mat-table [dataSource]="dataSource">
  <!-- 共享列直接写在表格内部 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{ element.id }} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
  </ng-container>

  <!-- 自定义列 -->
  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> 操作 </th>
    <td mat-cell *matCellDef="let element">
      <button mat-button>编辑</button>
    </td>
  </ng-container>

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

原方案报错原因 #

MatTable通过@ContentChildren(MatColumnDef, { descendants: true })查询所有后代的列定义，但*ngTemplateOutlet属于动态渲染内容，在MatTable初始化时这些内容还未生成，导致表格无法检测到对应的matColumnDef。封装成组件后，组件内容会作为MatTable的静态后代被识别，因此能正常加载列定义。

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