时间戳

首页 > 解决方案 > Angular Material Table：如何突出显示正在排序的列？

angular-material - Angular Material Table：如何突出显示正在排序的列？

问题描述

使用 Angular Material 表。如何对正在排序的列应用不同的背景颜色？

标签： angular-material

解决方案

如果您只想<th>在排序时更改颜色，请分配一个模板参考，并进入参考以检查排序是否处于活动状态并且排序值是否存在。

<th mat-header-cell #header *matHeaderCellDef mat-sort-header 
[style.background-color]="
(header['_sort'].active == 'id' && header['_sort'].direction) ?'red':''"> ID </th>

StackBlitz

https://stackblitz.com/edit/angular-5fzkja?embed=1&file=app/table-overview-example.html

推荐阅读