如何修改Angular Material mat-table的列标题名称？

根据你的mat-table表头实现方式，分两种场景处理：

场景1：静态模板定义表头 #

如果列标题是直接写在模板的<mat-header-cell>标签里，直接修改对应文本即可：

1. 找到模板中对应Age列的<ng-container matColumnDef="age">区块
2. 将<mat-header-cell>内的Age替换为Date of birth

示例代码对比：
原来的代码：

<ng-container matColumnDef="age">
  <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>
</ng-container>

修改后的代码：

<ng-container matColumnDef="age">
  <mat-header-cell *matHeaderCellDef> Date of birth </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>
</ng-container>

场景2：动态绑定表头文本 #

如果是通过组件类中的映射对象动态渲染表头，修改映射对象的对应值即可：

1. 在组件的.ts文件中找到定义表头名称的映射对象（通常类似columnHeaders）
2. 将age对应的属性值从Age改为Date of birth

示例代码对比：
原来的组件代码：

displayedColumns: string[] = ['name', 'age', 'gender'];
columnHeaders: {[key: string]: string} = {
  name: 'Name',
  age: 'Age',
  gender: 'Gender'
};

修改后的组件代码：

displayedColumns: string[] = ['name', 'age', 'gender'];
columnHeaders: {[key: string]: string} = {
  name: 'Name',
  age: 'Date of birth',
  gender: 'Gender'
};

模板中如果是如下绑定方式，会自动同步更新标题：

<mat-header-row *matHeaderRowDef="displayedColumns">
  <mat-header-cell *matHeaderCellDef="let col"> {{columnHeaders[col]}} </mat-header-cell>
</mat-header-row>

具体流程总结 #

1. 确认你的mat-table表头是静态写死还是动态绑定的实现方式
2. 对应修改模板中的静态文本，或者组件类中的表头映射对象
3. 运行项目验证修改是否生效

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