使用与 mat-h​​eader-cell 的条件属性绑定

Question

我正在使用mat-tableAngular 并尝试使我的表成为可重用的组件。我有一些传递给模板的选项，例如：

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]您的问题可以通过添加绑定轻松解决，例如：

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

disabled是@Input来自MatSortHeader指令的绑定，该组件用于禁用此列的排序功能。