我尝试将我的自定义 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 被覆盖
最佳答案
您可能遇到了有关 View 封装的问题。
ngx-datatable 在其样式上使用 ViewEncapsulation.None。您可以将您的 .my-custom-cell 样式定义添加到 ./src/styles.(s)css 或者您也可以 set your component's encapsulation to None .
可以查看view encapsulation from angular guide的详情如果您还不知道的话。
编辑 (对 Tom's comment 的回应)
我也不想要这样的解决方案,但不幸的是,这似乎是这样...... 我准备好了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;
}
如您所见,红色背景未分配给名称列。但性别列的背景颜色为蓝色。
这是因为 View 封装告诉cli 编译.my-custom-cell 类,如下所示:
.my-custom-cell[_ngcontent-c176]{background:red}
但是DatatableComponent is using ViewEncapsulation.None .如果您检查名称列中的一个单元格,那么您可以看到具有 .my-custom-cell 类的 datatable-body-cell 没有 [_ngcontent-c176] 属性。所以这个类没有被应用。
如果您取消注释 encapsulation line:46然后你会看到 [_ngcontent-c176] 属性已经从编译的 .my-custom-cell 中消失,并且 name 列成功获取样式。
如果您找到其他合适的方法,请告诉我。
关于angular - Ngx-datatable cellClass 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47198777/