Question

我想使角度垫表中的排序箭头始终可见（例如，它们的不透明度始终设置为0.54）。我该怎么办？

我已经尝试过将css代码添加到cthe组件的css文件中。它使所有箭头可见（不透明度：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

正如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

在桌子上插入[@ .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>

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

3 个答案: