CSS 问题 Ngx-table angular2 泳道答案

【问题标题】：CSS issue Ngx-table angular2 swimlaneCSS 问题 Ngx-table angular2 泳道
【发布时间】：2017-05-24 19:16:21
【问题描述】：

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

【问题讨论】：

标签： css angular datatable ngx-datatable

【解决方案1】：

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

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

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

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

【讨论】：

这就像一个魅力！非常感谢！提醒其他像我一样不太了解的人记得从'@angular/core'导入{ViewEncapsulation}
因为这个问题，我浪费了一整天的时间……你是救世主！
这是我在组件中见过的最愚蠢的东西

【解决方案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"
        ],

【讨论】：