设置 Material 按条件排序 - Angular 项目

Question

我正在 Angular 9 项目中工作，使用 Material。

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

这是我的 table 和专栏：

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

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

设置 Material 按条件排序 - Angular 项目

Set Material Sort on Condition - Angular Project

angular-material

angular

angular9