如何为Angular mat-table中显示mat-select描述的列实现排序？

问题核心矛盾：该列存储的是服务代码（如SDE_CODE），非编辑模式显示的是对应描述文本，默认排序会基于存储的代码值而非用户看到的描述文本，因此需要自定义排序逻辑。

解决步骤： #

1. 构建代码-描述映射（优化性能） #

先把服务列表转换成键值对映射，避免每次排序或显示都遍历数组查找，提升效率：

// 组件类中定义映射对象
serviceCodeDescMap: {[key: string]: string} = {};

// 在获取服务数据后初始化映射（比如在ngOnInit或数据加载完成后）
initServiceMap() {
  this.serviceCodeDescMap = this.filteredServices.reduce((map, item) => {
    map[item.SDE_CODE] = item.SDE_DESCRIPTION;
    return map;
  }, {});
}

// 重构getServiceDescription函数
getServiceDescription(code: string) {
  return this.serviceCodeDescMap[code] || code;
}

2. 编写自定义排序比较器 #

针对MGA_ServiceDescription列，实现基于描述文本的排序逻辑：

compareServiceDescriptions(a: any, b: any, isAscending: boolean) {
  const descA = this.getServiceDescription(a.MGA_ServiceDescription);
  const descB = this.getServiceDescription(b.MGA_ServiceDescription);
  
  if (descA < descB) {
    return isAscending ? -1 : 1;
  }
  if (descA > descB) {
    return isAscending ? 1 : -1;
  }
  return 0;
}

3. 拦截表格排序事件 #

替换目标列的默认排序逻辑，保留其他列的原生排序：

ngOnInit() {
  this.dataSource.sort = this.sort;

  // 监听排序变更事件
  this.sort.sortChange.subscribe((sortState) => {
    if (sortState.active === 'MGA_ServiceDescription') {
      // 对数据源执行自定义排序
      this.dataSource.data.sort((a, b) => {
        return this.compareServiceDescriptions(a, b, sortState.direction === 'asc');
      });
      // 手动触发表格数据更新
      this.dataSource._updateChangeSubscription();
    } else {
      // 其他列使用默认排序逻辑
      this.dataSource.sortData(this.dataSource.data, sortState);
    }
  });
}

4. 编辑模式兼容 #

编辑模式下用户通过mat-select修改服务代码时，数据源会自动更新，排序状态会保持当前规则，无需额外处理。

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