Angular Material 2 DataTable 使用嵌套对象排序 [英] Angular Material 2 DataTable Sorting with nested objects

问题描述

我有一个带有排序标题的普通 Angular Material 2 DataTable.所有排序都是标题工作正常.除了以对象为值的那个.这些根本没有排序.

I have a normal Angular Material 2 DataTable with sort headers. All sort are headers work fine. Except for the one with an object as value. These doesn't sort at all.

例如:

 <!-- 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 配置:

Here's the displayColumn config:

 displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];

将 'project.name' 更改为 'project' 不起作用，"project['name']"

Changing 'project.name' to 'project' doesn't work nor "project['name']"

我错过了什么?这甚至可能吗?

What am I missing? Is this even possible?

这是一个 Stackblitz:Angular Material2 DataTable 排序对象

Here's a Stackblitz: Angular Material2 DataTable sort objects

感谢您的所有回答.我已经让它处理动态数据.所以我不必为每个新的嵌套属性添加 switch 语句.

Thanks for all your answers. I've already got it working with dynamic data. So I don't have to add a switch statement for every new nested property.

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

Here's my solution: (Creating a new DataSource which extends MatTableDataSource is not necessary)

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 语句来实现.例如:

It was hard to find documentation on this, but it is possible by using sortingDataAccessor and a switch statement. For example:

@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 Material 2 DataTable 使用嵌套对象排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！