Angular Material：mat-sort-headers 和非 mat-sort-headers 的相同样式

Question

我最近注意到我的列标题没有水平对齐。我知道是什么原因造成的，但我不知道如何准确修复它。

我目前拥有的

目前是这样，因为 HTML 包含以下代码

<ng-container matColumnDef="Status">
   <mat-header-cell *matHeaderCellDef mat-sort-header="Status">
     Status
     ... <!-- Unimportant information -->
   </mat-header-cell>
     ... <!-- Unimportant information -->
</ng-container>
<ng-container matColumnDef="Actions">
   <mat-header-cell *matHeaderCellDef> <!-- Notice how mat-sort-header is not present, this causes the visual issue -->
     Acties
   </mat-header-cell>
    ... <!-- Unimportant information -->
</ng-container>

我想要达到的目标

通过将mat-sort-header="Status" 添加到Acties HTML 代码可以轻松实现。但是，这会导致另一个问题，即以下错误消息（参见图 3）。

我已经尝试过了

• 我尝试将mat-sort-header 类样式添加到我的Acties 列，但这并不能解决问题，因为mat-sort-header 还会生成其他HTML（按钮等）。
• 将mat-sort-header="status"（小写状态）添加到我的Acties HTML 中，但它会导致排序混乱但不会引发错误。
• 将mat-sort-header=""（空）添加到我的Acties HTML 中，但随后会导致排序混乱，并改为在Acties 上排序，这是不可能的，但不会引发错误。

Answer 1

你能做一个 /deep/ 样式选择器并给“acties”一个类或 id 并使用你需要的规则来定位它吗？

/deep/ mat-header-cell.acties {
// your rules here
}