Angular Material 16表格绑定数据更新后表头不更新问题求助

使用Angular Material 16版本渲染表格时，出现绑定数据更新后，表格内容可正常同步，但表头无法更新的问题。尝试手动触发变更检测、重新渲染表格均未生效。

组件代码 #

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

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
  standalone: true,
  imports: [MatTableModule, CommonModule],
})
export class TableBasicExample {
  
  columns = [
    {field: 'position', header: 'No'},
    {field: 'name', header: 'Name'},
    {field: 'weight', header: 'Weight'},
    {field: 'symbol', header: 'Symbol'},
  ];
  displayedColumns: string[] = this.columns.map(col => col.field);
  dataSource = [
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
    {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
    {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
    {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
    {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
    {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
    {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
    {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  ];

  test() {
      this.columns = [
          {field: 'position', header: 'Position'},
          {field: 'name', header: 'Element Name'},
          {field: 'weight', header: 'Mass'},
          {field: 'symbol', header: 'Symbol'},
      ];
      this.displayedColumns = [...this.columns.map(col => col.field)];
      this.dataSource = [
        {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
        {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
        {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
      ];
  }

}

初始模板代码 #

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container *ngFor="let column of columns" [matColumnDef]="column.field">
      <th mat-header-cell *matHeaderCellDef> {{column.header}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column.field]}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<button (click)="test()">Button to update data and header</button>

问题现象 #

点击按钮后，表头和内容的底层数据均已修改，表格内容可正常更新，但表头无变化。

可行解决方案 #

通过索引位置访问columns数组来修改模板，不再使用循环中的column变量，改用columns[index]的方式访问：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="columns[i].field">
      <th mat-header-cell *matHeaderCellDef> {{columns[i].header}} </th>
      <td mat-cell *matCellDef="let element"> {{element[columns[i].field]}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<button (click)="test()">Button to update data and header</button>

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