ソート ヘッダー付きの通常の 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 オブジェクトのソート
編集：回答をありがとうございました。すでに動的データで動作しています。そのため、ネストされた新しいプロパティごとに switch ステートメントを追加する必要はありません。
これが私の解決策です: (MatTableDataSource を拡張する新しい DataSource を作成する必要はありません)
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();
}
}
ベストアンサー1
これに関するドキュメントを見つけるのは困難でしたが、switch ステートメントを使用することで可能ですsortingDataAccessor。例:
@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;
}