У меня есть обычный DataTable 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'
не работает и не "project['name']"
Что мне не хватает? Это вообще возможно?
Вот Stackblitz: Сортировка объектов Angular Material2 DataTable
Изменить: Спасибо за все ваши ответы. У меня уже есть работа с динамическими данными. Поэтому мне не нужно добавлять оператор 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();
}
}