Angular Material表格Mat Sort Header对created列排序失效求助

问题根源 #

你遇到的问题主要有两点：

1. 列名与数据字段不匹配：你的matColumnDef定义为created，但模板中绑定的是element.createdAt，MatSort默认会用列名作为键去数据源取值，导致找不到对应数据，排序直接失效。
2. 日期字符串排序的潜在风险：即便字段匹配，直接用YYYY-MM-DD格式的字符串排序虽然暂时可行，但如果后续API返回带时间的日期格式（比如YYYY-MM-DD HH:mm:ss），字符串排序就会出错，转成Date对象排序更可靠。

解决方案 #

方案1：统一列名与数据字段

修改代码让列定义和数据字段保持一致：

1. 更新TS中的displayedColumns：

displayedColumns: string[] = [
  'id',
  'Name',
  'Description',
  'Status',
  'createdAt', // 将created改为createdAt
  'Actions',
];

2. 更新HTML中的matColumnDef：

<ng-container matColumnDef="createdAt">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      Created At
    </th>
    <td mat-cell *matCellDef="let element">
      {{ element.createdAt | date }}
    </td>
</ng-container>

这样MatSort就能正确获取createdAt字段的值，YYYY-MM-DD格式的字符串本身可按字典序正确排序，功能会恢复正常。

方案2：自定义Sorting Data Accessor（更灵活）

如果不想修改列名，可自定义sortingDataAccessor，指定created列取element.createdAt的值并转成Date对象，保证排序准确性：
在TS的getSales方法中添加逻辑：

getSales(): void {
this.sales_service.getSales().subscribe({
  next: (val) => {
    this.dataSource = new MatTableDataSource(val);
    // 自定义排序数据访问器
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch(property) {
        case 'created':
          // 将字符串转成Date对象用于排序
          return new Date(item.createdAt);
        default:
          // 其他列按默认逻辑处理
          return item[property];
      }
    };
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  },
});
}

这种方法无需修改列名和模板，同时Date对象排序比字符串排序更稳定，后续日期格式变化也能正常工作。

额外验证 #

确保你的表格标签上已正确添加matSort指令，比如：

<table mat-table [dataSource]="dataSource" matSort>
  <!-- 列定义内容 -->
</table>

如果表格没有matSort指令，mat-sort-header也会失效。

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