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屋!