Angular MatTable双属性差值计算列的MatSort排序实现疑问

MatSort默认依赖行对象的直接属性进行排序，你的第三列是通过两个属性计算得出的，没有对应的直接属性，因此无法自动排序。下面提供两种无需修改API的解决方案：

方案一：自定义排序逻辑 #

重写MatTableDataSource的sortData方法，针对计算列单独处理排序规则：

组件代码 #

import { MatTableDataSource } from '@angular/material/table';
import { Sort } from '@angular/material/sort';

// 定义你的数据类型
interface FileRecord {
  nbreEnregistrementTotal: number;
  nbreMouvementsDetailsDiffusees: number;
  // 其他属性...
}

export class YourTableComponent {
  dataSource = new MatTableDataSource<FileRecord>([]);

  // 自定义排序函数
  private customSort(data: FileRecord[], sort: Sort): FileRecord[] {
    if (!sort.active || sort.direction === '') return data;

    return data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'nEnregistrementRejetes':
          // 计算当前行的拒绝记录数
          const aRejected = a.nbreEnregistrementTotal - a.nbreMouvementsDetailsDiffusees;
          const bRejected = b.nbreEnregistrementTotal - b.nbreMouvementsDetailsDiffusees;
          return compare(aRejected, bRejected, isAsc);
        // 其他列保持默认排序逻辑
        case 'nbreEnregistrementTotal':
          return compare(a.nbreEnregistrementTotal, b.nbreEnregistrementTotal, isAsc);
        case 'nbreMouvementsDetailsDiffusees':
          return compare(a.nbreMouvementsDetailsDiffusees, b.nbreMouvementsDetailsDiffusees, isAsc);
        default:
          return 0;
      }
    });
  }

  ngOnInit(): void {
    // 绑定自定义排序到数据源
    this.dataSource.sortData = this.customSort.bind(this);
  }
}

// 通用比较工具函数
function compare(a: number, b: number, isAsc: boolean): number {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

模板代码 #

保持你原来的写法即可，mat-sort-header已经正确绑定了列名nEnregistrementRejetes：

<ng-container matColumnDef="nEnregistrementRejetes">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>N° enregistrement rejetées</th>
  <td mat-cell *matCellDef="let row">{{row.nbreEnregistrementTotal-row.nbreMouvementsDetailsDiffusees}}</td>
</ng-container>

方案二：给行对象添加计算属性 #

在前端加载数据后，给每个行对象新增一个对应计算列的属性，让MatSort可以直接识别：

组件代码 #

// 假设你从接口获取到原始数据
const rawData: FileRecord[] = await this.yourApiService.getData();

// 给每一行添加计算属性
const processedData = rawData.map(row => ({
  ...row,
  nEnregistrementRejetes: row.nbreEnregistrementTotal - row.nbreMouvementsDetailsDiffusees
}));

this.dataSource.data = processedData;

模板代码 #

修改td的渲染逻辑，直接使用新增的属性：

<ng-container matColumnDef="nEnregistrementRejetes">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>N° enregistrement rejetées</th>
  <td mat-cell *matCellDef="let row">{{row.nEnregistrementRejetes}}</td>
</ng-container>

这种方法本质是提前在前端计算值，不需要修改API，同时能复用MatSort的默认排序逻辑。

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