Ngx-datatable cellClass 不工作

Question

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

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

Css 对于 my-custom-cell :

.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/styles.(s)css 或者您也可以 set your component's encapsulation to None.

如果您还不知道view encapsulation from angular guide，可以查看详细信息。

编辑 （对的回复）

我也不想要这样的解决方案，但不幸的是，这似乎是这样...... 我已经准备好 a demo app，它显示了我想告诉的内容。

.my-custom-cell 分配给名称列。

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

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

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

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

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

但是DatatableComponent is using ViewEncapsulation.None。如果您检查名称列中的一个单元格，那么您可以看到具有 .my-custom-cell class 的数据表主体单元格没有 [_ngcontent-c176] 属性。所以 class 没有应用。

如果你取消注释 encapsulation line:46 然后你会看到 [_ngcontent-c176] 属性已经从编译的 .my-custom-cell 中消失，并且名称列成功获得样式。

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

Answer 2

以下适合我的作品：

:host /deep/ .my-custom-cell {
  background: red;
}

Ngx-datatable cellClass 不工作

Ngx-datatable cellClass not working

ngx-datatable

angular