Question

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

数据表代码 - test.component.html

 .\dcraw-9.27-ms-64-bit.exe -c "C:\Downloads\RAW_CANON_10D.CRW" | cjpeg\cjpeg.exe temp.jpg

TS代码 - test.component.ts

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

SCSS代码 - test.component.scss

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

在Chrome开发人员工具中，它显示添加的行颜色类，但行没有获得绿色作为背景颜色。我不知道上面的代码有什么问题。请指导我解决问题的正确方法。

注意：我正在开展 Angular 5

Answer 1

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

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

或者，您可以使用ViewEncapsulation.None让CSS规则绕过应用。

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

这是一个有效的Stackblitz。

ViewEncapsulation.None的含义是这样的：

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

Answer 2

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

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

Answer 3

尝试在根级styles.scss文件夹中添加src中的css（除index.html和main.ts之外）。

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

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

参考：

https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components
http://blog.ng-book.com/css-isolation-in-angular-2-components/
CSS is not working in my angular component

更新

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

即。如果你为一个单元格应用CSS，那么给这个选择器

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

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

Answer 4

尝试一下：

Cross-apply nested JSON array

ngx-datatable rowClass不起作用

4 个答案:

更新