Использование условной привязки атрибута с ячейкой mat-header-cell

Я использую 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, но, похоже, это не работает.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
3
0
777
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В этом случае Angular не будет применять директиву mat-sort-header.

Вашу проблему можно легко решить, добавив привязку [disabled], например:

 <mat-header-cell *matHeaderCellDef  mat-sort-header [disabled] = "!head.sort.sortable"

disabled — это @Input привязка директивы MatSortHeader, которая отключает функцию сортировки для этого столбца.

Другие вопросы по теме