У меня есть обычный 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, не требуется)
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();
}
}
angular
angular-material2
Роман
источник
источник
Ответы:
Найти документацию по этому поводу было сложно, но это возможно с помощью
sortingDataAccessor
оператора и switch. Например:источник
sort
от вthis.dataSource.sort = sort;
ngAfterViewInit
чтобы это сработалоВы можете написать функцию в компоненте, чтобы получить глубокое свойство объекта. Затем используйте его,
dataSource.sortingDataAccessor
как показано нижеИ в html
источник
lodash
в своем проекте, поэтому, если вы используетеlodash
, это решение означает следующее:this.dataSource.sortingDataAccessor = _.get;
нет необходимости заново изобретать доступ к глубоким свойствам.Ответ в том виде, в каком он дан, можно даже сократить, переключение не требуется, если вы используете точечную нотацию для полей.
источник
Мне нравятся решения @Hieu_Nguyen. Я просто добавлю, что если вы используете lodash в своем проекте, как это делаю я, решение преобразуется в следующее:
Нет необходимости заново изобретать глубокий доступ к собственности.
источник
displayedColumns
's как путь к значениям, т.е.['title', 'value', 'user.name'];
а затем использовать<ng-container matColumnDef="user.name">
в своем шаблоне.mat-sort-header
например,mat-sort-header="user.name"
Я использую общий метод, который позволяет использовать dot.seperated.path с
mat-sort-header
илиmatColumnDef
. Это не может молча вернуть undefined, если не может найти свойство, продиктованное путем.Вам просто нужно установить аксессор данных
источник
Я настроил для уровня нескольких вложенных объектов.
источник
Cannot find name '_isNumbervalue
, и, предполагая, что это метод lodash, я не могу найти метод в модуле узла.isNumber
существует. Я раньше не знаком с lodash, если это то, что это такое. Как мне это использовать?Еще одна альтернатива, которую здесь никто не выбросил, сначала сплющите колонну ...
Еще одна альтернатива, плюсы и минусы для каждого!
источник
Просто добавьте это в свой источник данных, и вы сможете получить доступ к вложенному объекту
источник
Он пытается отсортировать по элементу ['project.name']. Очевидно, что у элемента нет такого свойства.
Должно быть легко создать пользовательский источник данных, который расширяет MatTableDatasource и поддерживает сортировку по свойствам вложенных объектов. Ознакомьтесь с примерами в документации material.angular.io по использованию настраиваемого источника.
источник
У меня была та же проблема, при тестировании первого предложения у меня были некоторые ошибки, я мог исправить это, добавив «переключатель (свойство)»
источник
Используйте MatTableDataSource. Проверьте полное решение проблемы с MatSort.
в HTML
источник
Если вы хотите иметь таблицу материалов Angular с некоторыми расширенными функциями, такими как сортировка вложенных объектов, посмотрите https://github.com/mikelgo/ngx-mat-table-extensions/blob/master/libs/ngx-mat -таблица / README.md .
Я создал эту библиотеку, потому что мне не хватало некоторых функций mat-table из коробки.
Расширенная сортировка аналогична предложенному ответу @Hieu Nguyen, но немного расширена, чтобы также иметь правильную сортировку по заглавным и меньшим буквам.
источник