css - Angular:单元格的 innerHtml 中的 CSS 类用法

Question

我正在与这个 CSS 问题或 Angular 问题作斗争，...问题是我的表格单元格的 DIV 元素中使用的 CSS 类被忽略了。

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

在我添加的 css 文件中:

.test-css { color: orange; }

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

谢谢

Answer 1

在 mat table inner html 中不起作用，所以使用 [innerText] 代替 [innerHtml]。