Angular 材质可排序表 - 始终显示排序图标（不仅在悬停时）答案

【问题标题】：Angular material sortable table - always show sort icons (not only when hovering)Angular 材质可排序表 - 始终显示排序图标（不仅在悬停时）
【发布时间】：2020-02-26 20:17:20
【问题描述】：

我正在查看https://material.angular.io/components/sort/overview 的可排序表示例

我不喜欢的是排序图标仅在悬停列标题时显示。

有什么方法可以让他们一直都在吗？（不仅在悬停时）

【问题讨论】：

标签： angular angular-material angular-material2

【解决方案1】：

如果列尚未排序，悬停/聚焦/长按标题将显示排序图标。如果列已排序，图标将一直显示，直到该列变为未排序。如果您想始终显示排序图标，则必须对表中的一列进行排序，如下所示：

   <table matSort (matSortChange)="sortData($event)" matSortActive="name" 
   matSortDirection="asc" matSortDisableClear>

【讨论】：

@Keti Kutateladze，我想同时在多个列上显示排序图标。应该怎么做？
用户如何在不悬停或聚焦的情况下知道该列是否可排序？谢谢

【解决方案2】：

全局应用以下样式。它将始终显示排序图标，并根据排序方向更改图标。

.mat-table{
  .mat-sort-header-arrow {
    opacity: 0 !important;
    display: none !important;
  }
  th[aria-sort='ascending'] {
    color: #0069c0;
    .mat-sort-header-button {
      &:before {
        border-bottom-color: #0069c0 !important;
      }
      &:after {
        border-top-color: transparent !important;
      }
    }
  }
  th[aria-sort='descending'] {
    color: #0069c0;
    .mat-sort-header-button {
      &:before {
        border-bottom-color: transparent !important;
      }
      &:after {
        border-top-color: #0069c0 !important;
      }
    }
  }
  .mat-sort-header-button {
    transition: all ease-in 300ms;
    &:before,
    &:after {
      border: 4px solid transparent;
      content: '';
      display: block;
      height: 0;
      right: 10%;
      top: 50%;
      position: absolute;
      width: 0;
    }
    &:before {
      border-bottom-color: #ababab;
      margin-top: -10px;
    }
    &:after {
      border-top-color: #ababab;
      margin-top: 1px;
    }
  }
}

注意：它将隐藏默认的角度排序图标。

【讨论】：

【解决方案3】：

您需要将 CSS 样式应用于您的 .mat-table/table 选择器：

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

注意：在某些情况下，您需要在 .mat-sort-header... 之前使用 ::ng-deep 来应用样式

然后你需要在你的表格中禁用 Angular 动画，因为你会在悬停时看到小动画，所以将这个添加到模板中的 .mat-table/table 选择器中：

    <table
      ...[your inputs]
      [@.disabled]="true"
    >

最后一步 - 例如，您的标准排序方向是“asc”，然后将其中一个排序更改为“desc”，然后选择另一个排序为“asc”的排序，您将看到“desc”图标不会重置为您的标准“asc”方向，因此解决方案是为尚未定义方向的图标设置 CSS 样式：

  th:not([aria-sort]) {
    ::ng-deep .mat-sort-header-indicator {
      transform: translateY(10px) !important;
      .mat-sort-header-pointer-left {
        transform: rotate(45deg) !important;
      }
      .mat-sort-header-pointer-right {
        transform: rotate(-45deg) !important;
      }
    }
  }

【讨论】：

【解决方案4】：

试试这个：

.mat-sort-header-arrow {
  opacity: .4!important;
}

【讨论】：