Странное поведение Angular mat-sort-header 5.2.4
Я использую mat-table в сочетании с mat-sort-header углового материала. Но странно то, что сортировка отлично работает на 2 из 6 столбцов (0 и 4). При сортировке остальных одна запись всегда вытягивается наверх, а остальные остаются несортированными или случайным образом «упорядоченными». Я надеюсь, что смогу предоставить достаточно кода, чтобы решить эту проблему. Там есть импорт, и он в основном скопирован из https://v5.material.angular.io/components/table/examples.
Стол
все остальные столбцы выглядят так же, как и во фрагменте
<mat-table #matTable [dataSource] = "dataSource" matSort>
<ng-container matColumnDef = "Status">
<mat-header-cell *matHeaderCellDef mat-sort-header
....
Машинопись
@ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
ngOnInit() {
this.dataSource = new MatTableDataSource(this.projectlist);
}
//no specific code for sorting needed (I think)
Прошу прощения за то, что скриншот сделан на немецком языке, но вы должны понять, о чем я.
Отсортировано
Есть идеи, как это исправить?
Ответы 1
Чтобы matSortHeader работал, вам необходимо убедиться, что ваш matColumnDef совпадает с именем свойства вашего объекта источника данных. Например:
<ng-container matColumnDef = "status">
<mat-header-cell *matHeaderCellDef
mat-sort-header>
My header text
</mat-header-cell>
<mat-cell *matCellDef = "let row">
{{row.status}}
</mat-cell>
</ng-container>
matColumnDef - это статус, поэтому ваша строка также должна иметь свойство с тем же именем:
export class MyDataSet {
status: string;
}
В противном случае оператор сортировки не сможет выполнять свою работу. Вы также можете написать свой собственный dataAccessor:
this.datasource.sortingDataAccessor = ((item: MyDataSet, sortHeaderId: string) => {
// write code to get your property out of item using sortHeaderId
});
Дополнительная информация здесь: https://material.angular.io/components/table/api#MatTableDataSource
Эмм да, вот и все. Я бы никогда этого не увидел. Два рабочих столбца, где совпадают "случайно"
Соответствует ли ваш matColumnDef вашим именам свойств this.projectList?