如何重写mat-sort-header默认行为实现字符串日期正确排序？

当然可以重写mat-sort-header的默认排序行为！我之前也遇到过字符串日期排序混乱的问题，用自定义排序数据访问器就能完美解决，给你一步步拆解实现方法：

1. 定义自定义排序访问函数 #

在你的组件类中，编写一个函数来处理日期字段的转换逻辑——把字符串日期转换成可正确比较的Date对象：

customSortDataAccessor(item: any, property: string): any {
  switch (property) {
    case 'regDate':
      // 这里根据你的日期字符串格式调整解析逻辑
      // 示例：如果是'YYYY-MM-DD'或'YYYY/MM/DD'格式，直接用new Date即可
      return new Date(item.regDate);
    // 其他需要特殊处理的字段也可以在这里添加
    default:
      // 默认返回原始字段值，保持其他列的正常排序
      return item[property];
  }
}

注意：如果你的日期字符串格式比较特殊（比如DD-MM-YYYY），直接用new Date可能会解析错误，这时候需要手动拆分字符串并构建Date对象：

case 'regDate':
  const dateParts = item.regDate.split('-');
  // 月份是从0开始计数的，所以要减1
  return new Date(+dateParts[2], +dateParts[1] - 1, +dateParts[0]);

2. 绑定自定义访问器到数据源 #

在组件的初始化逻辑中，将自定义函数绑定到MatTableDataSource的sortingDataAccessor属性上，同时关联MatSort实例：

import { Component, ViewChild, OnInit } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

// 假设你的数据类型定义
interface YourDataType {
  regDate: string;
  // 其他字段...
}

@Component({
  // 组件元数据...
})
export class YourComponent implements OnInit {
  dataSource = new MatTableDataSource<YourDataType>([]);
  @ViewChild(MatSort) sort!: MatSort;
  // 你的数据数组
  yourDataArray: YourDataType[] = [/* 数据内容 */];

  ngOnInit(): void {
    this.dataSource.data = this.yourDataArray;
    this.dataSource.sort = this.sort;
    // 绑定自定义排序访问器
    this.dataSource.sortingDataAccessor = this.customSortDataAccessor;
  }

  // 上面定义的customSortDataAccessor函数放在这里
  customSortDataAccessor(item: YourDataType, property: string): any {
    // ...实现代码
  }
}

3. 保持模板不变 #

你的现有模板代码不需要修改，mat-sort-header会自动使用我们自定义的排序逻辑：

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource" matSort>
    <!-- Reg Date Column -->
    <ng-container matColumnDef="regDate">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Reg Date </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.regDate }} </mat-cell>
    </ng-container>
    <!-- 其他列... -->
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

这样设置完成后，点击Reg Date列的表头，就会按照日期的实际时间顺序排序，而不是字符串的字典序了。

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