Как сделать так, чтобы стрелки сортировки в угловой мат-таблице всегда были видны?

Question

Я хочу, чтобы стрелки сортировки из угловой таблицы матов были всегда видны (например, для них всегда установлена ​​непрозрачность 0,54).Как мне это сделать?

Я уже пытался добавить css-код в мой css-файл для компонента cthe.Он сделал все стрелки видимыми (с непрозрачностью: 0,54), но в этом случае все стрелки остаются с этой непрозрачностью всегда.Даже если стрелка была нажата, ее непрозрачность была установлена ​​равной 0,54, но непрозрачность должна быть установлена ​​равной 1.

Я попробовал добавить этот код в мой css-файл:

::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
  opacity: 0.54 !important;
}

Я хочу, чтобы стрелки всегда отображались с непрозрачностью 0,54.Оставшееся поведение стрелок должно остаться без изменений.В случае, когда столбец не отсортирован, например, стрелка находится в неопределенном состоянии, стрелка должна быть стрелкой вверх и иметь непрозрачность: 0,54.Если щелкнуть стрелку, непрозрачность должна быть установлена ​​на 1. Если я отменю сортировку, стрелка снова будет иметь непрозрачность: 0,54.

Здесь есть пример: https://stackblitz.com/edit/angular-isxoc5. Всестрелки отображаются как я хочу.Но если щелкнуть стрелку, у нее все равно будет непрозрачность 0,54, а не 1.

Answer 1

Так же, как прокомментировал Эрвин, но с использованием ng-deep

::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
  opacity: 0.54 !important;
  transform: translateY(0px) !important;
}

Это не удаляет анимации на стрелках при наведении и выходе при наведении.

Answer 2

Стрелка, когда щелчок применяет к нему сортировку, это может быть либо сортировка по возрастанию, либо сортировка по убыванию - не отменяется сортировка ... Независимо от того, сколько раз мы нажимаем на заголовок столбца, некоторые (asc или dsc) будет применена сортировка, и поэтому мы должны увидеть стрелку с opacity: 1. Для этого мы отслеживаем каждый клик и применяем класс boldArrow к th. Стайлинг для opacity:1 выполняется применительно к этому классу

релевантно TS :

@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  sortedStatus: boolean[] = [];

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.sortedStatus = [false, false, false, false];
    this.dataSource.sort = this.sort;
  }

  sortedStyler(columnNumber) {
    console.log("sortedStyler with", columnNumber);
    if (this.sortedStatus[columnNumber] == true) {
      //this.sortedStatus[columnNumber] = false;
    } else {
      this.sortedStatus[columnNumber] = true;
      for (var i = 0; i < this.sortedStatus.length; i++) {
        if (i != columnNumber) { this.sortedStatus[i] = false; }
      }
    }
  }

}

релевантно HTML :

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)='sortedStyler(0)' [ngClass]="sortedStatus[0] === true ? 'boldArrow' : ''"> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)='sortedStyler(1)' [ngClass]="sortedStatus[1] === true ? 'boldArrow' : ''">  Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)='sortedStyler(2)' [ngClass]="sortedStatus[2] === true ? 'boldArrow' : ''">  Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)='sortedStyler(3)' [ngClass]="sortedStatus[3] === true ? 'boldArrow' : ''">  Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

релевантно css :

::ng-deep .boldArrow .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
  opacity: 1 !important; 
}

рабочий стекблиц здесь