时间戳

首页 > 解决方案 > ngb-highlight 选择器的 highlightClass 输入不起作用

angular - ngb-highlight 选择器的 highlightClass 输入不起作用

问题描述

我正在使用 ngb-highlight 选择器来突出显示表格中包含的一些术语。现在，我想添加背景颜色，并且按照在线文档，我使用了 highlightClass 输入并定义了一个包含这个新属性的自定义类。

使用它的默认类，它可以改变字体粗细。新课程不起作用。

员工列表.component.html

<tr *ngFor="let employee of employees$ | async; index as i">
          <th scope="row">{{ i + 1 }}</th>
          <td>
            <ngb-highlight [result]="employee.firstname" [term]="filter.value" [highlightClass]="'employee-highlight'"></ngb-highlight>
          </td>
          <td>
            <ngb-highlight [result]="employee.lastname" [term]="filter.value" [highlightClass]="'employee-highlight'"></ngb-highlight>
          </td>
          <td>
            <ngb-highlight [result]="employee.email" [term]="filter.value" [highlightClass]="'employee-highlight'"></ngb-highlight>
          </td>
          <td>
            <ngb-highlight [result]="employee.role.name" [term]="filter.value" [highlightClass]="'employee-highlight'"></ngb-highlight>
          </td>
</tr>

员工列表.component.scss

.employee-highlight {
    background-color: yellow;
}

我希望背景颜色为黄色，但样式不会改变。我能做些什么？

标签： angularng-bootstrap

解决方案

看起来 ViewEncapsulation 未在组件中设置为 none

@Component({
....
    encapsulation: ViewEncapsulation.None
....
})

推荐阅读