时间戳

首页 > 解决方案 > Angular：在数据源中使用对象时，MatSort 不起作用

angular - Angular：在数据源中使用对象时，MatSort 不起作用

问题描述

我有一个 Angular 6 应用程序，它有一个 Mat Table。该表的数据填充如下。排序适用于字段position和name，但不适用于作为对象一部分的weight和。我也尝试将列命名为in and但没有运气。请告知我做错了什么？symboldetaildetail.weightdisplayedColumnsmatColumnDef

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', detail: {weight: 4.0026, symbol: 'He'}},
  {position: 2, name: 'Helium', detail: {weight: 4.0026, symbol: 'He'}},
]

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

模板

 <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.detail.weight}} </td>
  </ng-container>

这是问题的 stackblitz url
https://stackblitz.com/edit/angular-kumdeq

标签： angularangular-material

解决方案

使用sortingDataAccessor，它

允许通过覆盖排序数据访问器来自定义排序，排序数据访问器定义了如何访问数据属性。

在 ngOnInit 中添加以下代码片段：

   this.dataSource.sortingDataAccessor = (item, property) => {
     switch (property) {
       case 'weight': return  item.detail.weight;
       case 'symbol': return  item.detail.symbol;
       default: return item[property];
  }

链接：https ://stackblitz.com/edit/angular-kumdeq-z4bags

推荐阅读