css - Angular 2 中的 ngClass 不在表格中呈现

标签 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"

}

最佳答案

改成,

<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>

关于css - Angular 2 中的 ngClass 不在表格中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40002501/

相关文章:

css - 定位 h2::after 包含 h2::before

angular - Angular2的微服务架构

css - 无法在 Firefox 中垂直对齐跨度的innerHTML

npm - 我如何使用全局 scss 变量覆盖我的节点模块

css - sweetalert2 更改弹出图标颜色

css - 用 Sprite 重复背景图像

jquery - 使用 css/jQuery 在两个元素之间添加链接线

css - 媒体查询替代代码区域?

angular - 当我更改单个 mat-select 时,所有 Mat-select 值都会更改

angular - Angular 2 上的 Ngrx Store、Effects、Http Ajax 轮询设置