angular - ngx-datatable rowClass 不工作

Question

这个问题可能已经有了答案，因为我已经看到了一些答案，但这些答案并没有帮助我解决问题。我的问题是 ngx-datatable 中的 rowClass 对我不起作用。

数据表代码 - test.component.html

<ngx-datatable class="material" 
            [rows]="rows" 
            [columnMode]="'force'" 
            [reorderable]="reorderable"
            [rowClass]="getRowClass"
            (activate)="onActivate($event)">
            <ngx-datatable-column name="Cabinet Name" [flexGrow]="1">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <mat-icon class='folder-color'>folder</mat-icon>
                    {{ row?.cabinetname }}
                </ng-template>
            </ngx-datatable-column>
</ngx-datatable>

TS 代码 - test.component.ts

getRowClass = (row) => {
   return {
     'row-color': true
   };
}

SCSS 代码 - test.component.scss

.row-color {
    background-color: green;
}

在 chrome 开发者工具中，它显示添加的 row-color 类，但行没有将绿色作为背景色。我不知道上面的代码有什么问题。请指导我解决问题的正确方法。

注意:我正在研究Angular 5

Answer 1

问题是你的 .row-color范围为测试组件。您需要在其前面加上 /deep/打破封装:

/deep/ .row-color {
  background-color: green;
}

或者，您可以使用 ViewEncapsulation.None让您的 CSS 规则遍及应用。

或者您需要将此规则放在全局应用样式中的某个位置(不绑定(bind)到任何一个组件)。

这是一个有效的 Stackblitz .

什么 ViewEncapsulation.None does 意思是这样的:

您编写的任何 css 不仅会应用于您的组件，还会应用于整个上下文(页面)。如果您检查元素，您会在 Angular 组件上看到类似 <span _ngcontent-c15>...</span> 的内容.所以你组件上的所有东西，带有属性 _ngcontent-c15 的 Angular 标记(或类似)。那么您组件中的所有样式 都不是简单的span ，而是 span[_ngcontent-c15] .因此，如果您将跨度涂成红色，它就不会泄漏到其他组件(例如 _content-c16 )。 ViewEncapsulation.None从您的组件 CSS 中删除该属性，因此它在整个页面上都有效。