消毒和[innerHTML]

问题描述

我有一张席子桌子：

      <ng-container matColumnDef="quantity">
        <th mat-header-cell *matHeaderCellDef> Operation </th>
        <td mat-cell *matCellDef="let element" class='operation' [innerHTML]='quantity(element.quantity)'>
        </td>
      </ng-container>

table-component.ts

  quantity(numbers: number[]) : any {
    return this.sanitizer.bypassSecurityTrustHtml(
    numbers.map(n => n > 0 
      ? `<span class="add">+ ${n}</span>`
      : `<span class="remove"> ${n}</span>`
    ).join('<br />'));
  }

table-component.scss

span.add {
  color: green !important;
}

span.remove {
  color: rgb(216,0) !important;
}

当我检查表格单元格时，一切看起来都不错：

最终结果在表本身中：

我在做什么错了？

编辑：

好的，我发现问题出在模拟封装上。 （我不想禁用它）。如果我在组件模板中添加正常跨度，则所有工作都将正常进行，因为它看起来像这样：

我最初使用这种方法是因为某些单元格可以包含很多项目，并且ngFor生成〜200（x 5行）跨度很慢（渲染表花费了大约2秒钟）。因此，我要么使ngFor更快，要么尝试使样式起作用。

解决方法

对样式的角度使用封装。参见https://angular.io/guide/component-styles#view-encapsulation。您可以使用以下一种方式：

1. 像这样在您的阶梯中使用::ng-deep：::ng-deep span.add {...}
2. 通过在None装饰器中添加encapsulation: ViewEncapsulation.None，将封装更改为@Component。