Блог

Недавно я заметил, что заголовки моих столбцов не выровнены по горизонтали. Я выяснил, что вызывает это, но я не знаю, как это точно исправить.

Что у меня сейчас есть

В настоящее время это так, потому что 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 , что невозможно, но не выдаст ошибку.

Можете ли вы сделать селектор / deep / styling и присвоить «действиям» класс или идентификатор и настроить на него нужное вам правило?

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