使用动态列排序 - Angular 材料

Question

我正在使用这个URL并且我正在排序。排序工作正常，但是，我有 2 个数字列

1. 权重 - 它的值通过 API 调用来自数据库，并且存在于数据源中。 （这里，排序正在工作）
2. 双倍重量：其公式为：重量*2。 这里，“Double Weight”是在 HTML 中动态计算的，因此它在数据源中不可用。

我需要在“双重”列中应用排序。有人可以指导我吗？

HTML

< ng-container matColumnDef="weight">

< th mat-header-cell *matHeaderCellDef mat-sort-header>重量

< td mat-cell *matCellDef="let element"> {{元素.权重}}

< /ng-container>

< ng-container matColumnDef="weight2">

< th mat-header-cell *matHeaderCellDef mat-sort-header>重量

< td mat-cell *matCellDef="let element"> {{元素.权重 * 2}}

< /ng-container>

TS

@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.dataSource.sort = this.sort;
}

Answer 1

我非常确定按

(weight * 2)

排序将得到与按

weight

排序完全相同的结果。

因此，当您在两列中显示不同的值时，只需在两种情况下按权重排序即可。

Answer 2

尝试以下代码

ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

这可能有用。

Answer 3

您可以使用自定义排序功能，进行数字排序。

sort(valueA: any, valueB: any, order: string) {
let comparison = 0;
if (valueB === null) {
  comparison = 1;
} else if (valueA === null) {
  comparison = -1;
} else if (valueA > valueB) {
  comparison = 1;
} else if (valueA < valueB) {
  comparison = -1;
}
return order === 'desc' ? comparison * -1 : comparison;

}