如何在Angular mat table中实现按Last Name（姓氏）字母序排序

云原生阿岚

2026-10-7

实现方案

问题原因

你之前的逻辑不生效主要有两个原因：

你使用的MatMultiSortTableDataSource自带客户端排序逻辑，手动对数组排序后会被数据源的内置排序覆盖
拆分fullName取姓氏的逻辑可靠性低，你本身的用户数据已经提供了独立的lastName字段，可直接使用

客户端排序实现（CLIENT_SIDE为true时适用）

步骤1：自定义排序取值逻辑

给数据源配置sortingDataAccessor，指定当排序列为fullName时，使用lastName作为排序依据：

ngOnInit(): void {
  this.currentTab = 0;
  this.userTable.dataSource = new MatMultiSortTableDataSource(this.sort, this.CLIENT_SIDE);
  // 新增以下自定义排序逻辑
  this.userTable.dataSource.sortingDataAccessor = (item: UsersDto, property: string) => {
    switch(property) {
      case 'fullName':
        // 姓氏相同的情况下可以补充按名字排序，返回 `${item.lastName}${item.firstName}` 即可
        return item.lastName.trim().toLowerCase();
      default:
        return item[property as keyof UsersDto]?.toString().trim().toLowerCase() || '';
    }
  };
  // 原有订阅逻辑保持不变
  this.userTable.nextObservable.subscribe(() => { this._tableEvent(); });
  this.userTable.sortObservable.subscribe(() => { this._tableEvent(); });
  this.userTable.previousObservable.subscribe(() => { this._tableEvent(); });
  this.userTable.sizeObservable.subscribe(() => { this._tableEvent(); });
  this._getPageCount();
}

步骤2：调整默认排序参数

把默认排序的字段改为lastName，确保页面初始化时就按姓氏升序排列：

this.userTable = new TableData<UsersDto>(
  [
    { id: 'fullName', name: 'Full Name' },
  ], 
  // 把defaultSortParams从['fullName']改为['lastName']
  { defaultSortParams: ['lastName'], defaultSortDirs: ['asc'] }
);