如何解决Angular Material 12:自定义表格排序按钮
我有一个带排序的角度材料表:
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>
解决方法
我不知道这是不是最好的方法,但你可以
1.-使“箭头”不显示。为此,在你的styles.css - 所有应用程序共有的样式 - 你可以写
.mat-sort-header-ste,.mat-sort-header-arrow {
display:none!important
}
2.- 那么,如果您的排序名为 sort
,则您需要使用“sort.active”和 sort.direction` 的值
一个硬编码,对于名为“name”的列可以
@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>
您可以看到值如何变化
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。