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

Question

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

Вы также можете получить события изменения размера текста и коэффициент масштабирования, введя div, содержащий по крайней мере неразрывное пространство (возможно, скрытое) и регулярно проверяя его высоту. Если высота изменяется, размер текста изменился (и вы знаете, сколько - это также срабатывает, кстати, если окно будет увеличено в полностраничном режиме, и вы все равно получите правильный коэффициент масштабирования с одинаковой высотой / высота соотношение).

0

angular-material

задан Pat M 1 March 2019 в 22:02

2 ответа

Другие вопросы по тегам:

angular-material

Похожие вопросы:

score 0 · 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

score 0 · 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>

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