Angular：单元的innerHtml中的CSS类用法

Question

我正在解决这个CSS问题，或者说是棱角分明的... 问题是表单元的DIV元素中使用的CSS类将被忽略。

我复制了https://material.angular.io/components/table/examples的基本示例，因为这是我要使用的。

在我添加的css文件中：

  

.test-css {        颜色为橙色;    }

然后，我修改了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>

然后该列正确显示为橙色。

如果我将组件封装更改为“无”，则可以使用，但是整个表的布局会完全被打乱。 因此，我期望innerHtml的解释方式出现问题。

有没有办法解决它并正确解释innerHtml的想法？

谢谢