您可能面临有关视图封装的问题。
ngx-datatable 用途ViewEncapsulation.None在它的造型上。您可以添加您的.my-自定义单元格样式定义为 ./src/styles.(s)css 或者你也可以将组件的封装设置为 None https://github.com/swimlane/ngx-datatable/issues/834#issuecomment-334878690.
您可以查看以下详细信息从角度指南查看封装 https://angular.io/guide/component-styles#view-encapsulation如果你还不知道的话。
Edit (回应汤姆的评论 https://stackoverflow.com/questions/47198777/ngx-datatable-cellclass-not-working/47199643?noredirect=1#comment81362209_47199643)
我也不想要这样的解决方案,但不幸的是,这似乎就是这样......
我已经准备好了一个演示应用程序 https://stackblitz.com/edit/stackoverflow-47198777-1?file=app%2Fdemo-component.ts这表明了我想要讲述的内容。
.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 类,如下所示:
.my-custom-cell[_ngcontent-c176]{background:red}
But DatatableComponent 正在使用 ViewEncapsulation.None https://github.com/swimlane/ngx-datatable/blob/d4652065d9b14b1b18608bb8528b920f4b4ee0d4/src/components/datatable.component.ts#L101。如果您检查名称列中的单元格之一,那么您可以看到具有 .my-custom-cell 类的 datatable-body-cell 没有
[_ngcontent-c176] 属性。所以这个类没有被应用。
如果你取消注释封装线:46条 https://github.com/swimlane/ngx-datatable/blob/d4652065d9b14b1b18608bb8528b920f4b4ee0d4/src/components/datatable.component.ts#L101然后你会看到 [_ngcontent-c176] 属性已从编译的 .my-custom-cell 中消失,并且 name 列成功获取样式。
如果您找到其他合适的方法,请告诉我。