Angular Material mat-table带空格表头无法显示数据问题求助

问题根源 #

你定义的displayedColumns里用了带空格的列名（比如'First Name'），但Client数据对象的属性是驼峰命名（比如firstName）。模板中{{ element[column] }}会尝试用带空格的列名作为属性名去取值，而对象里根本没有'First Name'这个属性，自然拿不到数据。唯一正常的Id列大概率是笔误（实际代码中displayedColumns写的是'id'，和对象属性名匹配）。

解决方案：分离列标识与显示标题 #

最清晰可靠的做法是把数据属性名（作为列的唯一标识）和表头显示文本（带空格的标题）分开，具体步骤如下：

1. 修改组件TS代码，定义列配置数组：

// 用数据属性名作为列标识，严格匹配Client对象的属性
displayedColumns: string[] = ['id', 'firstName', 'lastName', 'email', 'createDate'];
// 配置列标识对应的带空格表头标题
columnConfigs = [
  { id: 'id', title: 'Id' },
  { id: 'firstName', title: 'First Name' },
  { id: 'lastName', title: 'Last Name' },
  { id: 'email', title: 'Email' },
  { id: 'createDate', title: 'Create Date' }
];
// 原始数据保持不变
const clients: Client[] = [
  { id: 1, firstName: "Mohamad", lastName: "Hamid", email:"xxxx@xxx.com", createDate: "25/5/2024" },
  { id: 2, firstName: "John", lastName: "Wisly", email:"xxxx@xxx.com", createDate: "25/5/2024" },
  { id: 3, firstName: "Jack", lastName: "Sparo", email:"xxxx@xxx.com", createDate: "25/5/2024" },
  { id: 4, firstName: "Jessica", lastName: "Henry", email:"xxxx@xxx.com", createDate: "25/5/2024" }
];

2. 修改HTML模板，循环列配置数组：

<ng-container *ngFor="let col of columnConfigs" [matColumnDef]="col.id">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ col.title }}</th>
  <td mat-cell *matCellDef="let element">{{ element[col.id] }}</td>
</ng-container>

这种方式既保证了数据取值的准确性，又能自由设置带空格的表头文本，后续维护也更方便。

快速应急修复（不推荐） #

如果不想大范围改动代码，可以在TS中写一个列名转属性名的函数，模板中调用：

// TS添加转换函数
getColumnProperty(column: string): string {
  return column.split(' ').map((word, idx) => {
    return idx === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  }).join('');
}

模板中修改取值逻辑：

<ng-container [matColumnDef]="column">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column }}</th>
  <td mat-cell *matCellDef="let element">{{ element[getColumnProperty(column)] }}</td>
</ng-container>

但这种方法依赖列名和属性名的严格驼峰对应关系，一旦属性命名规则变化就会失效，仅适合临时应急。

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