Таблица угловых материалов: Как выделить сортируемый столбец?

Question

Использование таблицы угловых материалов.Как можно применить другой цвет фона к сортируемому столбцу?

Answer 1

Если вы хотите, чтобы <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

Answer 2

Мне неприятно это говорить, но я знаю частичное решение вашей проблемы. Мое решение работает тогда и только тогда, когда сортировка выполняется пользователем, т.е. он не выделяет столбец при первоначальной сортировке при первом рендере, однако я публикую сообщениеэто здесь может дать вам направление на что посмотреть.Для захвата события сортировки вы должны добавить прослушиватель событий (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>

Надеюсь, это немного решит ваши проблемы.