10

我目前在让 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 问题

4

2 回答 2

31

我认为它与视图封装有关。基本上，您的 css 将具有 [_ngcontent-c5] 之类的属性，因为模板内的元素将自动具有该属性。

然而，由数据表添加到 dom 的项目可能没有该属性，导致样式什么也不做。

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

import { ViewEncapsulation } from '@angular/core';
@Component({
  [...] // other code like template and style urls
  encapsulation: ViewEncapsulation.None
})
于 2017-05-24T20:42:30.533 回答
0

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"
        ],
于 2021-11-10T04:59:08.787 回答