Я борюсь с этой проблемой CSS, или угловой, ...
Проблема в том, что класс CSS, используемый в элементе DIV моей ячейки таблицы, игнорируется.
Я скопировал базовый пример https://material.angular.io/components/table/examples, поскольку это то, что я хочу использовать.
в файле CSS, который я добавил:
.test-css {
оранжевый цвет;
} * +1010 *
затем я изменил шаблон html, чтобы одна ячейка вызывала метод из моего класса компонентов, чтобы получить код innerHTML:
<td mat-cell *matCellDef="let element" [innerHtml]="getInnerHtml(element)"</td>
Метод выглядит так:
public getInnerHtml(element) {
return `<div class="test-css">${element.name}</div>`;
}
Имя не отображается оранжевым цветом.
Если я применяю test-css к самой ячейке в шаблоне компонента:
<td mat-cell *matCellDef="let element" class="test-css [innerHtml]="getInnerHtml(element)"</td>
тогда столбец корректно отображается оранжевым цветом.
Если я изменяю инкапсуляцию компонента на None, это работает, но общая компоновка таблицы полностью нарушается.
Поэтому я ожидаю некоторых проблем в интерпретации innerHtml.
Есть идеи, если есть способ решить эту проблему и правильно интерпретировать innerHtml?
Спасибо