css - 清理和 [innerHTML] 后不应用样式

Question

我有一张垫子桌：

      <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>

表组件.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 />'));
  }

表组件.scss

span.add {
  color: green !important;
}

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

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

表格本身的最终结果：

我究竟做错了什么？

编辑：

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

我最初使用这种方法是因为某些单元格可以有很多项目，并且生成约 200（x 5 行）跨度的 ngFor 速度很慢（渲染表格需要约 2 秒）。所以我要么让 ngFor 更快，要么尝试让样式工作。

Answer 1

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

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