在 Angular 中正确使用 ngClass

问题描述

对于以下代码段，

<tr *ngFor= "let rec of csvHead; let first=first"
[ngClass] = "{'title':first}">
</tr>

类“title”成功添加到

。但我找不到原因。我猜这个值应该是 :true 或 :false 而不是 :first in

"{'title':first}"

1 个答案:

答案 0 :(得分：0)

ngClass 指令支持以下形式：

 *     <some-element [ngClass]="'first second'">...</some-element>
 *     <some-element [ngClass]="['first','second']">...</some-element>
 *     <some-element [ngClass]="{'first': true,'second': true,'third': false}">...</some-element>
 *     <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
 *     <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

并且您使用第三种形式，即键是 CSS 类，当值中给出的表达式的计算结果为 真实 值（不是真值或假值）时添加这些类,否则它们将被删除，

---

注意：first 是第一行计算结果为真的表达式

相关问题

• Angular2在ngClass中使用插值
• NgClass没有选择正确的类
• bootstrap css无法在ngClass中正确呈现
• 使用ngClass
• 在Stencil.js中使用ngclass
• 如何在数据绑定中使用ngClass？
• 如何在CSS中使用ngClass？
• 是否可以在NgClass指令中使用正则表达式？
• 如何在ngClass中使用函数？
• 在 Angular 中正确使用 ngClass

最新问题

• 我写了这段代码，但我无法理解我的错误
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• java中的random.expovariate()
• 每千个数字得到
• 是否有可能使 loadstring 不可能等于打印？卢阿
• 启动调试会话时出错 - Google Cloud Shell
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动

解决方法

ngClass 指令支持以下形式：

 *     <some-element [ngClass]="'first second'">...</some-element>
 *     <some-element [ngClass]="['first','second']">...</some-element>
 *     <some-element [ngClass]="{'first': true,'second': true,'third': false}">...</some-element>
 *     <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
 *     <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

并且您使用第三种形式，即键是 CSS 类，当值中给出的表达式的计算结果为 真实 值（不是真值或假值）时添加这些类,否则它们将被删除，

---

注意：first 是第一行计算结果为真的表达式