Angular 材料排序表 - 如何将 header 文本右对齐？

Question

我正在使用 Angular 材料表。

我可以将 alignment 列设置为右侧。

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>
    ...

我猜这个问题来自“排序”符号。

有什么想法吗？

现场演示

Answer 1

你是对的，它来自排序符号。 解决此问题的一种方法是使用 CSS 从右到左更改 header 的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;
}

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

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

Answer 2

另外，似乎使用 arrowPosition 属性给出了相同的结果。

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

Answer 3

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

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

或者将其放入您的全局 CSS 文件中，而无需::ng-deep ：

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

StackBlitz