Angular 2中的ngClass不在表中呈现

时间:2016-10-12 15:26:47

标签: css angular sass angular2-template ng-class

我目前在我的模板中有<table>,需要在不同的部分(行,单元格)中应用样式,我正在从css文件中读取。当我只使用文件样式来设置<td>元素的样式时,一切都运行正常,现在我想要合并一个类来设置我的表格样式并且事情不会呈现,有人可以看看吗?谢谢!

现在(不适用于<table><tr>):

    <div>

<table [ngClass] = "'component'"> <!-- width ="100px;"-->
<tr [ngClass] = "'row'">  <!-- width ="100px;" height = "6px;"-->

<td [ngClass] = "{'weak' : weak, 'neutral' : !weak}"></td>
<td [ngClass] = "{'moderate' : moderate,'neutral' : !moderate  }" ></td>
<td [ngClass] = "{'strong' : strong, 'neutral' : !strong }" ></td>
</tr>

</table>
</div>

当我使用它时它起作用:

 <table width ="100px;">
    <tr width ="100px;" height = "6px>

更新(添加scss):

.component{

    width : "6.250em";
    position: relative
}
.row{
     width : "6.250em";
     height : ".375em"

}

1 个答案:

答案 0 :(得分:2)

将其更改为,

<table [ngClass] = "{'component':true}"> <!-- width ="100px;"-->
      <tr [ngClass] = "{'row':true}">  <!-- width ="100px;" height = "6px;"-->

        ...
      </tr>

</table>

OR

<table [class.component] = "true"> <!-- width ="100px;"-->
      <tr  [class.row] = "true">  <!-- width ="100px;" height = "6px;"-->

        ...
      </tr>

</table>