Ngx-datatable cellClass 不起作用 [英] Ngx-datatable cellClass not working

问题描述

我尝试将自定义 css 附加到 ngx-datatable 单元格.

I try to append my custom css to ngx-datatable cell.

<ngx-datatable-column 
  *ngFor="let column of tableOptions.columnDefs"
  [cellClass]="'my-custom-cell'"
  ...

my-custom-cell 的 CSS :

.my-custom-cell{
  padding: 0;
}

在开发工具中我可以看到 datatable-body-cell 有类

In dev tools I can see datatable-body-cell has classes

class="datatable-body-cell my-custom-cell sort-active"

问题是没有覆盖css

推荐答案

您可能遇到了关于视图封装的问题.

Probably you're facing an issue about View Encapsulation.

ngx-datatable 在其样式上使用 ViewEncapsulation.None.您可以将 .my-custom-cell 样式定义添加到 ./src/styles.(s)css 或者您也可以 将组件的封装设置为无.

ngx-datatable uses ViewEncapsulation.None on it's styling. You can add your .my-custom-cell style definition to ./src/styles.(s)css or you can also set your component's encapsulation to None.

如果不这样做，您可以查看从角度指南查看封装的详细信息'已经不知道了.

You can check details of view encapsulation from angular guide if you don't know about it already.

编辑 (对 汤姆的评论)

我也不想要这样的解决方案，但不幸的是，这似乎是方法......我准备了一个演示应用，它显示我想说的.

I also don't want such a solution but unfortunately it seems this is the way... I've prepared a demo app which shows what I'm trying to tell.

.my-custom-cell 分配给 name 列.

.my-custom-cell assigned to name column.

.my-custom-cell-global 分配给性别列.

.my-custom-cell-global assigned to gender column.

./app/demo-component.ts

./app/demo-component.ts

<ngx-datatable-column name="name" [cellClass]="'my-custom-cell'">
  <ng-template ngx-datatable-cell-template let-value="value">
    {{value}}
  </ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="gender" [cellClass]="'my-custom-cell-global'">
  <ng-template ngx-datatable-cell-template let-value="value">
    {{value}}
  </ng-template>
</ngx-datatable-column>

./app/demo-component.scss

./app/demo-component.scss

.my-custom-cell {
  background: red;
}

./styles.scss

./styles.scss

.my-custom-cell-global {
  background: #e6f2ff;
}

如您所见，红色背景未分配给名称列.但是性别列的背景颜色为蓝色.

As you can see red background is not assigned to name column. But gender column gets blue background color.

这是因为视图封装告诉 cli 编译 .my-custom-cell 类，如下所示:

That's because view encapsulation tells the cli to compile the .my-custom-cell class as shown as below:

.my-custom-cell[_ngcontent-c176]{background:red}

但是 正在使用数据表组件.无.如果您检查 name 列中的单元格之一，那么您可以看到具有 .my-custom-cell 类的 datatable-body-cell 没有[_ngcontent-c176] 属性.所以不应用该类.

But DatatableComponent is using ViewEncapsulation.None. If you inspect one of the cells in name column then you can see that datatable-body-cell which has .my-custom-cell class, doesn't have [_ngcontent-c176] attribute. So the class is not applied.

如果您取消注释 en46 然后你会看到 [_ngcontent-c176] 属性已经从编译的 .my-custom-cell 中消失了，并且 name 列成功获取了样式.

If you uncomment encapsulation line:46 then you'll see that [_ngcontent-c176] attribute has gone from compiled .my-custom-cell, and name column gets the style successfully.

如果您找到其他合适的方式，请告诉我.

Let me know if you find another suitable way.

这篇关于Ngx-datatable cellClass 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！