Angular Material 排序表 - 如何将标题文本右对齐？答案

【问题标题】：Angular Material sorted table - How to align header text to right?Angular Material 排序表 - 如何将标题文本右对齐？
【发布时间】：2020-07-28 22:45:02
【问题描述】：

我正在使用 Angular Material 表。

我可以将列对齐设置为右对齐。

HTML：

<table mat-table [dataSource]="dataSource">
...
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    ...

CSS：

.mat-column-position {
    text-align: right;
}

但是当我使用排序功能时，列标题不再向右对齐：

<table mat-table [dataSource]="dataSource" matSort>
...
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    ...

我猜问题出在“排序”符号上。

有什么想法吗？

Live demo

【问题讨论】：

标签： angular sorting header angular-material

【解决方案1】：

你是对的，它来自排序符号。解决此问题的一种方法是使用 CSS 将标题的 direction 从右到左更改：

.mat-header-cell.mat-column-position {
    direction: rtl;
}

/* If you want the same default margin for the sort icon */
:host ::ng-deep .mat-header-cell.mat-column-symbol .mat-sort-header-arrow {
    margin-right: 6px;
    margin-left: 0px;
}

或者，您可以在标题单元格上将arrowPosition 属性设置为before 以获得相同的结果：

<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">No.</th>

【讨论】：

另外，似乎使用 arrowPosition 属性给出了相同的结果。 ( No. )
@Iznogood1 - 很好，这是一个更好的解决方案。我建议您添加您的解决方案作为答案:)

【解决方案2】：

另外，似乎使用 arrowPosition 属性会得到相同的结果。

<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition='before'> No. </th>

【讨论】：

【解决方案3】：

如果你不想在左侧保留排序箭头，我找到了另一种解决方案：

::ng-deep .mat-sort-header-container {
  justify-content: flex-end;
}

或者将它放在你的全局 CSS 文件中，不带::ng-deep：

.mat-sort-header-container {
  justify-content: flex-end;
}

StackBlitz

【讨论】：