CSS 发布 Ngx-table angular2 泳道

Question

我目前在让 ngx-datatable 具有正确的 css 方面遇到问题。我在我的 css 文件中有这个来导入正确的 css。

@import '@swimlane/ngx-datatable/release/index.css';
@import '@swimlane/ngx-datatable/release/themes/material.css';
@import '@swimlane/ngx-datatable/release/assets/icons.css';

它似乎只做了它应该做的一半。这是我 html 呼吁图书馆的部分。

  <ngx-datatable  class="material striped"
    class="material"
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="100">
  </ngx-datatable>

如果有人知道为什么会发生这种情况，那将非常有帮助。

@amcdnl任何线索，抱歉，如果你看到这篇文章，打扰你

CSS Issue

Answer 1

我认为它与视图封装有关。基本上你的 css 将被限定在像 [_ngcontent-c5] 这样的属性范围内，因为你的模板中的元素会自动拥有它。

但是，由数据表添加到 dom 的项目可能没有该属性，导致样式无法执行任何操作。

您可以通过添加选项封装来解决此问题：ViewEncapsulation.None 到您的组件，如下所示：

import { ViewEncapsulation } from '@angular/core';
@Component({
  [...] // other code like template and style urls
  encapsulation: ViewEncapsulation.None
})

Answer 2

encapsulation: ViewEncapsulation.None 是必需的。但即使在添加它之后，它也不适合我。不确定我的包安装是否不完整。

我不得不更新 angular.json 如下：

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "node_modules/@swimlane/ngx-datatable/index.css",
          "node_modules/@swimlane/ngx-datatable/themes/material.css",
          "node_modules/@swimlane/ngx-datatable/assets/icons.css"
        ],

CSS 发布 Ngx-table angular2 泳道

CSS issue Ngx-table angular2 swimlane

css

datatable

ngx-datatable

angular