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 开发人员工具中，它显示 行颜色 class 添加，但行没有将绿色作为背景颜色。我不知道上面的代码有什么问题。请指导我解决问题的正确方法。

注意：我正在研究Angular 5

Answer 1

使 getRowClass() 成为一个合适的函数，它将起作用：

getRowClass(row): string {
  return 'row-color';
}

Answer 2

尝试将 css 添加到根级别 src 文件夹中的 styles.scss 中（除了 index.html 和 main.ts）。

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

当您使用组件添加样式时，它会生成样式......和..
TL;DR;

参考：

更新

提供从父选择器到子选择器的样式。

即如果您要为单元格应用 CSS，请像这样提供选择器

.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell.row-color{
    background-color: green;  
}

PS：尝试提供这是你的全局 styles.scss

Answer 3

问题是您的 .row-color 仅限于测试组件。你需要在它前面加上 /deep/ 来打破封装：

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

或者，您可以使用 ViewEncapsulation.None 让您的 CSS 规则在应用程序中运行。

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

这是一个有效的 Stackblitz。

ViewEncapsulation.None 的意思是这样的：

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

Answer 4

试试这个：

[class.datatable-group-header-container] = "true"

[ngClass] = "{'datatable-group-header-container': true}"

ngx-datatable rowClass 不工作

ngx-datatable rowClass is not working

angular-material

ngx-datatable

angular

更新