Angular 4 Material表格表头排序问题：移除排序提示文本

嘿，我之前在项目里用Angular Material做表格的时候也碰到过这个烦人的提示文本问题，给你两个实用的解决办法：

方法1：通过CSS直接隐藏提示元素 #

Angular Material的排序提示是通过一个额外的辅助元素渲染出来的，我们可以用CSS精准定位并隐藏它。在你的组件样式文件（.component.css）里添加这段代码：

/* 隐藏排序后的提示文本 */
mat-sort-header .mat-sort-header-sorted {
  display: none;
}

如果上面的选择器没生效，可能是ngx-admin主题的样式优先级问题，你可以加个!important或者调整选择器的优先级：

.mat-sort-header-container .mat-sort-header-sorted {
  display: none !important;
}

方法2：自定义排序提示文本为空 #

另一种更“正规”的方式是利用Angular Material提供的输入属性，直接把提示文本设为空。在你的表格模板中，修改每个带有mat-sort-header的表头：

<!-- 示例：修改某一列的表头 -->
<ng-container matColumnDef="alertName">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [sortDescriptionLabel]="''"> 告警名称 </th>
  <td mat-cell *matCellDef="let element"> {{element.alertName}} </td>
</ng-container>

sortDescriptionLabel属性就是用来控制排序后的提示文本的，把它设为空字符串，默认的“Sorted by ascending order.”就不会显示了。

如果你的表格有很多列，不想逐个修改，还可以封装一个简单的自定义指令，全局设置这个属性为空，这样所有mat-sort-header都会自动生效。

内容的提问来源于stack exchange，提问作者Abhay