CSS问题Ngx-table angular2泳道

Nel*_*Lam 8 css datatable ngx-datatable angular

我目前在让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';
Run Code Online (Sandbox Code Playgroud)

它似乎只是做了一半的假设.这是我的html调用库的部分.

  <ngx-datatable  class="material striped"
    class="material"
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="100">
  </ngx-datatable>
Run Code Online (Sandbox Code Playgroud)

如果有人知道为什么会这样,那将非常有帮助.

@amcdnl任何线索,如果你读到这个,很抱歉打扰你

CSS问题

小智 24

我假设它与视图封装有关.基本上你的css将使用像[_ngcontent-c5]这样的属性,因为模板里面的元素会自动拥有它.

但是,由datatables添加到dom的项目可能没有该属性导致样式不执行任何操作.

你可以通过向你的组件添加选项封装:ViewEncapsulation.None来解决这个问题:

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

  • 这就像一个魅力!非常感谢!对于那些不太了解我的人,请记得从'@ angular/core'导入{ViewEncapsulation} (3认同)