angular - 使用带有 mat-h​​eader-cell 的条件属性绑定(bind)

Question

我将 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 属性，但这似乎不起作用。

Answer 1

在这种情况下，Angular 不会应用 mat-sort-header 指令。

您的问题可以通过添加 [disabled] 绑定(bind)来轻松解决，例如:

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

disabled 是来自 MatSortHeader 的 @Input 绑定(bind)指示该组件禁用此列的排序功能。