Angular 5 Datatable计算列（营收减成本）无法排序求助

你猜的完全正确！直接在HTML模板里计算{{project.revenue - project.cost}}确实会导致排序失效——Angular Material的MatTable排序功能是基于数据源中存在的字段来工作的，模板里的动态计算值并没有和数据源绑定，排序模块找不到对应的字段来进行排序逻辑处理。

下面给你两种可行的解决方案，你可以根据自己的场景选择：

方案一：提前在数据源中计算并添加margin字段 #

这种方法最直接，在组件里获取到数据后，给每个项目对象新增margin字段并计算好值，之后模板直接使用这个字段：

组件代码示例： #

// 假设你从API获取到原始项目数据
fetchProjects().subscribe(projects => {
  // 遍历原始数据，添加计算好的margin字段
  this.projects = projects.map(project => ({
    ...project, // 保留原始所有字段
    margin: project.revenue - project.cost // 提前计算利润
  }));
  // 把处理后的数据赋值给dataSource
  this.dataSource.data = this.projects;
});

修改后的模板代码： #

<ng-container matColumnDef="margin">
  <mat-header-cell *matHeaderCellDef mat-sort-header>Margin</mat-header-cell>
  <mat-cell *matCellDef="let project">{{project.margin}}</mat-cell>
</ng-container>

这样排序模块就能识别到margin字段，正常进行升序/降序排序了。

方案二：自定义排序数据访问器（不修改原始数据源） #

如果因为某些原因不能修改原始数据源，可以通过自定义sortingDataAccessor来告诉排序模块如何获取margin列的排序值：

组件代码示例： #

import { ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';

// ... 其他组件代码

@ViewChild(MatSort) sort!: MatSort;
dataSource = new MatTableDataSource<any>();

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  
  // 自定义排序访问器
  this.dataSource.sortingDataAccessor = (item, property) => {
    switch (property) {
      // 当排序字段是margin时，返回计算后的值
      case 'margin':
        return item.revenue - item.cost;
      // 其他字段使用默认的取值方式
      default:
        return item[property as keyof typeof item];
    }
  };
}

模板不需要修改，保持你原来的写法即可，排序模块会按照你定义的规则来获取margin列的排序依据。

两种方案对比 #

• 方案一适合数据不频繁更新、可以修改数据源的场景，代码更简洁，排序性能也更好；
• 方案二适合原始数据不能改动、或者数据会动态变化的场景，灵活性更高。

最后别忘了确保matColumnDef="margin"、mat-sort-header以及自定义排序里的case 'margin'三者的字段名完全一致哦！

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