我有一个带有排序标题的普通Angular Material 2 DataTable。
各种各样的头工作正常。除了以对象为值的对象。
这些根本不排序。

例如:

 <!-- Project Column - This should sort!-->
    <ng-container matColumnDef="project.name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Project Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.project.name}} </mat-cell>
    </ng-container>

注意element.project.name
这是displayColumn配置:
 displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];

'project.name'更改为'project'无效,也"project['name']"
我想念什么?这有可能吗?

这是一个Stackblitz:
Angular Material2 DataTable sort objects

编辑:
感谢您的所有答复。
我已经可以使用动态数据了。因此,我不必为每个新的嵌套属性添加switch语句。

这是我的解决方案:(无需创建扩展MatTableDataSource的新数据源)

export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> {

  sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) => string | number) =
    (data: WorkingHours, sortHeaderId: string): string | number => {
      let value = null;
      if (sortHeaderId.indexOf('.') !== -1) {
        const ids = sortHeaderId.split('.');
        value = data[ids[0]][ids[1]];
      } else {
        value = data[sortHeaderId];
      }
      return _isNumberValue(value) ? Number(value) : value;
    }

  constructor() {
    super();
  }
}

最佳答案

很难找到有关此文档,但是可以通过使用sortingDataAccessor和switch语句来实现。例如:

@ViewChild(MatSort) sort: MatSort;

ngOnInit() {
  this.dataSource = new MatTableDataSource(yourData);
  this.dataSource.sortingDataAccessor = (item, property) => {
    switch(property) {
      case 'project.name': return item.project.name;
      default: return item[property];
    }
  };
  this.dataSource.sort = sort;
}

关于angular - Angular Material 2 DataTable对嵌套对象进行排序,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48891174/

10-12 12:27
查看更多