Question

我有一个带有Mat表格的angular 6应用程序。该表的数据如下填充。排序适用于字段theme_minimal和position，但不适用于name对象的一部分weight和symbol。我也尝试过在detail和detail.weight中命名displayedColumns之类的列，但是没有运气。请告知我我做错了什么？

matColumnDef

模板

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'];

这是该问题的stackblitz网址
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

Angular：在数据源中使用对象时MatSort无法正常工作

1 个答案: