Angular Material 12：自定义表格排序按钮答案

【问题标题】：Angular Material 12: Customize Table Sort ButtonAngular Material 12：自定义表格排序按钮
【发布时间】：2021-09-11 18:22:50
【问题描述】：

我有一个带排序功能的 Angular 材料表：

table.component.html:

<table mat-table [dataSource]="dataSource" matSort>

  <th mat-header-cell mat-sort-header *matHeaderCellDef>
    <span>Name</span>
  </th>

  ...
</table>

这会以通常的 Material 样式在标题单元格中显示一个排序按钮。

我需要更改排序按钮的样式（而不是功能）。我怎样才能做到这一点？我尝试创建自己的按钮，但我不知道如何访问材料排序按钮的功能。

table.component.html:

<table mat-table [dataSource]="dataSource" matSort>

  <th mat-header-cell *matHeaderCellDef>
    <span>Name</span>

    <!-- `style` contains some custom styling -->
    <!-- `(click)` should do the same as on the Material sort button -->
    <button mat-button mat-icon-button (click)=??? style=...>
      <mat-icon>sort</mat-icon>
    </button>
  </th>

  ...
</table>

【问题讨论】：

标签： angular angular-material angular-material-table

【解决方案1】：

我不知道是否是最好的方法，但你可以

1.-使“箭头”不显示。为此，您可以在您的 styles.css（所有应用程序共有的样式）中编写

.mat-sort-header-ste,.mat-sort-header-arrow {
  display:none!important
}

2.- 那么，如果你的排序名为sort，你需要使用“sort.active”和sort.direction`的值

一个硬编码，对于名为“名称”的列可以是

@ViewChild(MatSort) sort: MatSort;
this.dataSource.sort = this.sort;

<th mat-header-cell *matHeaderCellDef mat-sort-header> 
{{sort && sort.active=="name"?
      sort.direction=='asc'?'Up':
      sort.direction=='desc'?'Down':
      null:null
}} Name </th>

您可以使用 [ngClass] 或其他方法

注意：如果你写在你的组件的底部

<pre>
{{sort?.active|json}} {{sort?.direction|json}}
</pre>

你可以看到值是如何变化的

ugly stackblitz

【讨论】：