我最近注意到我的列标题未水平对齐。我知道是什么原因造成的,但我不知道如何准确修复它。
我目前拥有的
当前是这样,因为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"
HTML代码中添加Acties
可以轻松实现。但是,这会引起另一个问题,即以下错误消息(参见图3)。
我已经尝试过的东西
mat-sort-header
类样式添加到我的Acties
列中,但这不能解决问题,因为mat-sort-header
还会生成其他HTML(按钮等)。mat-sort-header="status"
(小写状态)添加到我的Acties
HTML中,但是这样会使排序混乱,但不会引发错误。mat-sort-header=""
(空)添加到我的Acties
HTML中,但是这样会造成排序混乱,并根据Acties
进行排序,这是不可能的,但不会引发错误。 答案 0 :(得分:1)
您可以做一个/ deep /样式选择器,并给“ acties”一个类或id并用您需要的规则作为目标吗?
/deep/ mat-header-cell.acties {
// your rules here
}