Ngx-datatable cellClass不工作

Question

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

<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有一些类

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

问题是没有css被覆盖

Answer 1

也许你正面临着一个关于视图封装的问题。

ngx-datatable在它的样式上使用ViewEncapsulation.None。您可以将.my-custom-cell样式定义添加到./src/ style。(S)css，也可以使用set your component's encapsulation to None。

如果您还不了解view encapsulation from angular guide，可以查看它的详细信息。

编辑(对的响应)

我也不想要这样的解决方案，但不幸的是，这似乎是一种方式……我已经准备好了a demo app，它显示了我想要讲述的内容。

.My-自定义-分配给名称列的单元格。

.MY-custom-cell-全局分配给性别列。

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

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

./styles.scss

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

正如您所看到的，红色背景并未分配给name列。但是性别栏的背景颜色是蓝色的。

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

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

但是DatatableComponent is using ViewEncapsulation.None。如果您检查name列中的一个单元格，那么您可以看到具有.my-custom-cell类的datatable-body-cell没有_ngcontent-c176属性。所以类不会被应用。

如果您取消注释encapsulation line:46，那么您将看到_ngcontent-c176属性已经从已编译的.my-custom-cell中删除，并且name列成功地获得了样式。

如果你找到另一种合适的方法，请告诉我。