【问题标题】:ngClass in Angular 2 not rendering in tableAngular 2中的ngClass不在表格中呈现
【发布时间】:2016-10-13 00:50:50
【问题描述】:

我目前在我的模板中有一个<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"

}

【问题讨论】:

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


    【解决方案1】:

    改成,

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

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

    【讨论】:

    • 谢谢你,但它仍然没有显示样式:(
    • 你在哪里写风格?在组件或全局样式表中?
    • 在全局样式表 (scss) 中。
    • 你能在 plunker 中重现吗? plnkr.co/edit/E31aE03iTXNZY0AEoyfU?p=preview 按预期工作。
    • 嘿 micronyks,这可能是一个愚蠢的问题,但是当我运行 Plunker 时,它会显示“正在加载”。我看到了生成
      的模板,但是除了加载之外我什么也没看到
    猜你喜欢
    • 2016-07-14
    • 2018-10-18
    • 1970-01-01
    • 2016-09-02
    • 2016-10-27
    • 1970-01-01
    • 2018-07-13
    • 1970-01-01
    • 2017-09-25
    相关资源
    最近更新 更多