如何使角垫表中的排序箭头始终可见？

Question

目标是使角垫表的排序箭头始终可见（例如，它们始终将不透明度设置为 0.54）。

我尝试在我的.css 文件中为这个组件添加一些css 代码。它使所有箭头可见（我将不透明度设置为 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

正如 Ervin 评论的那样，但使​​用的是 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

在 mat-table 中插入 [@.disabled]

<mat-table [@.disabled]="true">

在scss中添加这个

::ng-deep .mat-sort-header-arrow {
    transform: none !important;
    opacity: 1 !important;
}

Answer 3

单击时的箭头对其应用排序，它可以是升序或降序 - 没有取消排序之类的东西......无论我们点击列标题多少次，一些（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; 
    }

工作stackblitz here