[英]Angular Material 12: Customize Table Sort Button
I have an Angular Material Table with sorting:我有一个带排序的角度材料表:
table.component.html
: table.component.html
:
<table mat-table [dataSource]="dataSource" matSort>
<th mat-header-cell mat-sort-header *matHeaderCellDef>
<span>Name</span>
</th>
...
</table>
This displays a sort button in the header cell in the usual Material style.这会以通常的材料样式在标题单元格中显示一个排序按钮。
I need to change the style (not the functionality) of the sort button.我需要更改排序按钮的样式(不是功能)。 How can I do that?我怎样才能做到这一点? I tried creating my own button, but I do not know how to access the Material sort button's functionality.我尝试创建自己的按钮,但我不知道如何访问材料排序按钮的功能。
table.component.html
: 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>
I don't know if is the best aproach, but you can我不知道这是否是最好的方法,但你可以
1.-makes display none the "arrows". 1.-使显示没有“箭头”。 For this, in your styles.css -the style that is common to all the aplication- you can write为此,在你的styles.css - 所有应用程序共有的样式 - 你可以写
.mat-sort-header-ste,.mat-sort-header-arrow {
display:none!important
}
2.- then, if your sort is called sort
, you need play with the values of "sort.active" and sort.direction` 2.- 那么,如果你的排序被称为sort
,你需要使用 "sort.active" 和 sort.direction` 的值
a HARD code, for a column called "name" can be硬代码,对于名为“名称”的列可以是
@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>
You can use [ngClass] or another aproach您可以使用 [ngClass] 或其他方法
NOTE: if you write al the bottom of your component注意:如果你在组件的底部写
<pre>
{{sort?.active|json}} {{sort?.direction|json}}
</pre>
You can see how the values change您可以看到值如何变化
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.