根据条件设置材料排序 - Angular Project

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 将更改参考列进行排序。如果您打算避免这种情况，您可以使用mat-header-cell 指令将disabled 属性添加到th。

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