我有一个带有排序头的法线Angular material 2数据表. 所有排序都是页眉,工作正常.除了以对象为值的那个. 这些东西一点都不好分类.

例如:

 <!-- 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'也行不通

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

下面是Stackblitz: Angular Material2 DataTable sort objects

Edit:

以下是我的解决方案:(不需要创建扩展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相关问答推荐

带有搜索功能的CDK-VIRTUAL-SCROLL-VIEPORT不显示该值

在剑道UI网格中包装Excel导出的列

使用jsPDF生成带有图像的PDF时出现灰色条纹

HTTP拦截器在Angular 17项目中不起作用

Primeng:安装ANGLE 16.2.0版本

ANGLE v16独立组件不能与拦截器一起工作?

使用forkJoin和mergeMap的正确方式是什么?

ngRouterOutlet和组件生命周期使用自定义模板渲染的问题

MatTooltip 显示在 html 原生对话框下方

Angular 13 中