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

Posted 2023-03-28

【中文标题】如何使角垫表中的排序箭头始终可见？

【英文标题】：How to make sort arrows in angular mat-table always visible?

【发布时间】：2019-11-06 05:24:00

【问题描述】：

目标是使角垫表的排序箭头始终可见（例如，它们始终将不透明度设置为 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。

【问题讨论】：

嗨@Albert .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow opacity: 0.54 !important;变换：translateY（0px）！重要； 这应该做的工作:)

嗨@ErvinLlojku。谢谢，您的解决方案正是我想要的。你能不能给我点别的建议？如果我单击箭头两次（从而取消排序），箭头是向下箭头。如果此箭头失去焦点然后再次获得焦点，则箭头是向上箭头，而不是向下箭头。我可以以某种方式自动执行此行为，以便在取消排序后箭头会自动刷新并立即变为向上箭头？

嗨@Albert .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-indicator transform: translateY(0px) !important; .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-pointer-left transform: rotate(-45deg) !important; .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-pointer-right transform: rotate(45deg) !important; 尝试这个。我个人尽量避免 !important 因为会影响性能。另一种解决方案是创建一个自定义指令来处理排序:)

【参考方案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;

这不会删除悬停进入和悬停退出时箭头上的动画。

【讨论】：

是的，谢谢，它有效。我自己添加了 ::ng-deep 。你能不能给我点别的建议？如果我单击箭头两次（从而取消排序），箭头是向下箭头。如果此箭头失去焦点然后再次获得焦点，则箭头是向上箭头，而不是向下箭头。我可以以某种方式自动执行此行为，以便在取消排序后箭头会自动刷新并立即变为向上箭头？

@AlbertSteiner 对不起，但我不知道如何解决这个问题，因为它是一个动画，据我了解，您需要在运行时附加和修改动画。您应该将此标记为答案并打开一个新问题以寻求有关角度动画的帮助。

@AlbertSteiner 您得到原始问题的答案了吗？如果是这样，您应该将该解决方案标记为答案。

【参考方案2】：

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

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

在scss中添加这个

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

【参考方案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