没有ViewEncapsulation.None,不会应用Angular2样式

时间:2017-02-24 05:35:04

标签: angular primeng

我使用primeng作为数据表组件,但问题是关于角度的样式。我有以下模板:

<p-dataTable [value]="values">
    <p-column *ngFor="let column of columns;"
              [header]="column.name"
              [field]="column.field"
              styleClass="{{getColumnCssClasses(column)}}"
             // [styleClass]="getColumnCssClasses(column)" tried this way also
             >
    ...
    </p-column>
  </p-dataTable>

所以,p-columnstyleClass指令,我可以添加自己的css类。

getColumnCssClasses(column) {
   if(column.isToggle) {
      return 'toggle-column';
   }
}

CSS:

.togggle-column {
    width: 50px;
}

结果,我看到我的类正确应用,但不是样式。 我在head标记中看到了样式:

<style>.toggle-column[_ngcontent-nyw-32] {
  width: 55px;
}</style>

我理解问题是Angular将[_ngcontent-nyw-32]加到我的css类中,但在html中我只有toggle-coumn。我知道我可以使用encapsulation: ViewEncapsulation.None修复它,但我不想这样做。为什么绑定无法正常工作?

0 个答案:

没有答案