Angular:使用DataSource中的对象时，Matsort不起作用

Question

我有一个具有垫子表的Angular 6应用程序。表的数据如下所示。排序适用于position和name的字段，而weight和symbol则不是detail对象的一部分。我还尝试过将displayedColumns和matColumnDef中的detail.weight等列命名，但没有运气。请告知我在做什么错？

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

Answer 1

使用sortingDataAccessor，

允许通过覆盖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