根据条件设置材质排序 - Angular 项目

Question

我正在使用 Material 从事 Angular 9 项目。

我有一个支持排序（Mat-sort）的材质表。该排序运行良好。我现在只想允许某些列根据条件进行排序。有没有办法将mat-sort-header属性设置为条件？

这是我的表格和列：

<table mat-table [dataSource]="dataSource" matSort (matSortChange)="setSortInRoute()">
    <ng-container *ngFor="let column of tableConfig.columns">
      <ng-container matColumnDef="{{ column.columnDef }}">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.title }}</th>
        <td mat-cell *matCellDef="let row">
          {{ row[column.dataProperty[0]] }}
        </td>
      </ng-container>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
      mat-row
      *matRowDef="let row; columns: displayedColumns"
      (click)="goToDetails(row)"
    ></tr>
  </table>

我尝试将mat-sort-header属性设置为一个条件，如下所示：布尔变量在[mat-sort-header]="sortColumn"哪里。sortColumn然而，即使 var 为 false，列仍然具有排序功能。

我计划让条件成为来自 的布尔变量tableConfig.columns，它可能是tableConfig.columns.allowSort。

有没有办法将此属性设置为条件？如果没有，关于如何实现这一目标有什么建议吗？

谢谢

Answer 1

默认情况下，当单击列标题时，mat-table 将更改用于排序的参考列。如果您想避免这种情况，可以向with指令添加一个disabled属性。thmat-header-cell

... ... <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="column.sortingDisabled">{{ column.title }}</th> ... ...