如何异步向mat-table添加列？解决服务执行后列显示不更新问题

我之前也碰到过一模一样的问题！直接用push修改列数组后表格毫无反应，后来才搞明白是Angular变更检测的机制在搞鬼，下面给你详细说解决方案：

一、解决现有列显示/隐藏后表格不更新的问题 #

你用columnsToShow.push("someColumn")没效果的核心原因是：Angular的变更检测依赖于引用变化。push只是修改了原数组的内容，但数组本身的引用没有改变，所以组件没察觉到变化，自然不会更新表格。

解决方法很简单，只要让columnsToShow的引用发生变化就行，有几种常用方式：

方式1：使用扩展运算符生成新数组 #

// 服务调用完成后执行
this.columnsToShow = [...this.columnsToShow, "someColumn"];

方式2：用slice()返回新数组 #

this.columnsToShow.push("someColumn");
// 生成一个新数组引用触发变更检测
this.columnsToShow = this.columnsToShow.slice();

方式3：用RxJS的BehaviorSubject管理列（更适合异步场景） #

如果你的列显示逻辑涉及很多异步操作，推荐用BehaviorSubject来管理列数组，组件订阅它的变化：

// 组件里定义
private columnsSubject = new BehaviorSubject<string[]>(['初始列1', '初始列2']);
public columnsToShow$ = this.columnsSubject.asObservable();

// 服务完成后更新列
yourServiceCall().subscribe(() => {
  const currentColumns = this.columnsSubject.value;
  this.columnsSubject.next([...currentColumns, "someColumn"]);
});

模板里用async管道订阅：

<mat-table [dataSource]="dataSource">
  <!-- 列定义... -->
  <mat-header-row *matHeaderRowDef="columnsToShow$ | async"></mat-header-row>
  <mat-row *matRowDef="let row; columns: columnsToShow$ | async;"></mat-row>
</mat-table>

二、异步添加全新的列（模板中原本没有的列） #

如果要添加的是之前模板里没定义过的新列，就需要动态创建matColumnDef的ng-container。这里可以用Angular的ViewContainerRef和TemplateRef来实现：

步骤1：准备列定义模板 #

先在组件里定义一个通用的列模板（或者根据后端返回的列类型动态生成）：

<ng-template #dynamicColumnTemplate let-column="column" let-item="item">
  <mat-header-cell *matHeaderCellDef>{{ column.label }}</mat-header-cell>
  <mat-cell *matCellDef="let item">{{ item[column.key] }}</mat-cell>
</ng-template>

步骤2：动态创建列并添加到表格 #

import { Component, ViewChild, ViewContainerRef, TemplateRef, AfterViewInit } from '@angular/core';
import { MatTable, MatColumnDef } from '@angular/material/table';

@Component({
  // ...组件元数据
})
export class YourTableComponent implements AfterViewInit {
  @ViewChild('dynamicColumnTemplate') dynamicColumnTemplate!: TemplateRef<any>;
  @ViewChild('matTable', { read: ViewContainerRef }) tableContainer!: ViewContainerRef;
  @ViewChild(MatTable) matTable!: MatTable<any>;
  
  columnsToShow: string[] = ['现有列1'];
  dataSource = /* 你的数据源 */;

  ngAfterViewInit() {
    // 模拟异步获取新列（比如从接口）
    setTimeout(() => {
      const newColumn = { key: 'newAsyncColumn', label: '异步新增列' };
      // 创建新的ng-container并渲染模板
      const columnRef = this.tableContainer.createEmbeddedView(this.dynamicColumnTemplate, {
        column: newColumn
      });
      // 获取并配置matColumnDef指令
      const columnDefEl = columnRef.rootNodes[0].querySelector('[matColumnDef]') as HTMLElement;
      columnDefEl.setAttribute('matColumnDef', newColumn.key);
      const columnDef = columnDefEl.injector.get(MatColumnDef);
      // 手动注册列定义到表格
      this.matTable.addColumnDef(columnDef);
      // 更新列数组触发表格刷新
      this.columnsToShow = [...this.columnsToShow, newColumn.key];
    }, 2000);
  }
}

这样不管是显示隐藏已有列，还是异步新增全新列，都能让表格正确更新啦！

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