Question

使用Angular Material表。

如何将不同的背景色应用于正在排序的列？

Answer 1

我不想这么说，但是我知道您的问题的部分解决方案，只有当用户正在执行排序时，我的解决方案才有效，即在第一次渲染时它不突出显示初始排序中的列，但是我发布了它可能会为您提供指导。为了捕获排序事件，您应该将事件侦听器(matSortChange)="onSortEvent($event)"添加到DOM文件中，如下所示：

<table (matSortChange)="onSortEvent($event)"  mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

然后可以在您的.ts文件中使用以下命令捕获单击列的名称并将其存储在本地变量中：

  activeColumn: string;
onSortEvent(eventData){
    this.activeColumn= eventData['active'];
  }

这将在局部变量中填充活动列的名称，该变量可依次用于激活标题的特定类，如下所示：在您的css文件中，您可以输入以下内容： .highlight { background-color: lightgray; } 并在您的DOM文件中：

<ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header [className]="activeColumn === 'position'?'highlight':'default'"> No. </th>
    <td mat-cell *matCellDef="let element"> {{}} </td>
 </ng-container>

我希望它能解决您的一些问题。

Answer 2

如果您只希望<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

角材料表：如何突出显示正在排序的列？

2 个答案: