Я использую mat-table
с Angular и пытаюсь сделать свою таблицу многоразовым компонентом. У меня есть несколько параметров, которые передаются в шаблон, например:
const columns: TableColumn[] = [
{
title: 'Person',
colKey: 'person',
sort: {
sortable: false
}
},
{
title: 'Date',
colKey: 'date',
sort: {
sortable: true,
selected: true,
sortAsc: false
}
}
];
Я пытаюсь добавить mat-sort-header
на основе этих параметров.
<ng-container *ngFor = "let head of options.columns" matColumnDef = "{{head.colKey}}">
<mat-header-cell *matHeaderCellDef [attr.mat-sort-header] = "head.sort.sortable">{{head.title}}</mat-header-cell>
<mat-cell *matCellDef = "let item">{{item[head.colKey]}}</mat-cell>
</ng-container>
Итак, поскольку столбец date
можно сортировать, я ожидаю, что он добавит атрибут mat-sort-header
, но, похоже, это не работает.
В этом случае Angular не будет применять директиву mat-sort-header
.
Вашу проблему можно легко решить, добавив привязку [disabled]
, например:
<mat-header-cell *matHeaderCellDef mat-sort-header [disabled] = "!head.sort.sortable"
disabled
— это @Input
привязка директивы MatSortHeader, которая отключает функцию сортировки для этого столбца.