清理后不应用样式 [innerHTML]

Question

我有一个垫子-table:

      <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, 0) !important;
}

当我检查 table 单元格时，一切看起来都很好：

而 table 本身的最终结果：

我做错了什么？

编辑：

好的，我发现是模拟封装的问题。（我不想禁用）。如果我在组件模板中添加一个正常的跨度，它就可以正常工作，因为它看起来像这样：

我最初使用这种方法是因为一些单元格可能有很多项目，而生成 ~ 200（x 5 行）跨度的 ngFor 很慢（渲染 table 花费了~2 秒）。所以我要么让 ngFor 更快，要么尝试让样式起作用。

Answer 1

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

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

清理后不应用样式 [innerHTML]

Style is not applied after sanitization and [innerHTML]

css

angular

angular-material

encapsulation

angular-dom-sanitizer