以不同方式调用 css class 时 ngClass 不起作用?
ngClass not working when calling a css class diferently?
我遇到了问题,更像是无法理解为什么代码 does/doesn 在使用 ngClass 指令时不起作用。
我在 component.css
里面有这个 css class
.yellow-text {
color: yellow;
}
在 component.html 中,我有这个简单的段落,nameTest 是来自组件的 属性,其值为 'Testing'。
<p [ngClass]="{ yellow-text: nameTest === 'Testing' }">ASDASD</p>
除非我在黄色文本中添加“ ”,否则无法编译。
<p [ngClass]="{ 'yellow-text': nameTest === 'Testing' }">ASDASD</p>
另一方面,如果我让 css class 看起来像这样
.yellowtext {
color: yellow;
}
我可以使用这个代码。
<p [ngClass]="{ yellowtext: nameTest === 'Testing' }">ASDASD</p>
为什么?我错过了什么?抱歉问这个问题,我可能遗漏了一些基本的东西。
它不编译没有引号的原因,无论是单引号还是双引号,是因为 ngClass
需要一个对象,而在 Javascript 中,对象键不需要引号,如果它们只包含字符、数字和下划线,如果键有特殊字符,如 -
在你的情况下,你必须在它们周围加上引号。例如
{this is not valid: 'Not OK'}
不是有效的对象语法,要使其有效,请在键 {'this is now valid': 'OK now'}
周围加上引号
我遇到了问题,更像是无法理解为什么代码 does/doesn 在使用 ngClass 指令时不起作用。 我在 component.css
里面有这个 css class.yellow-text {
color: yellow;
}
在 component.html 中,我有这个简单的段落,nameTest 是来自组件的 属性,其值为 'Testing'。
<p [ngClass]="{ yellow-text: nameTest === 'Testing' }">ASDASD</p>
除非我在黄色文本中添加“ ”,否则无法编译。
<p [ngClass]="{ 'yellow-text': nameTest === 'Testing' }">ASDASD</p>
另一方面,如果我让 css class 看起来像这样
.yellowtext {
color: yellow;
}
我可以使用这个代码。
<p [ngClass]="{ yellowtext: nameTest === 'Testing' }">ASDASD</p>
为什么?我错过了什么?抱歉问这个问题,我可能遗漏了一些基本的东西。
它不编译没有引号的原因,无论是单引号还是双引号,是因为 ngClass
需要一个对象,而在 Javascript 中,对象键不需要引号,如果它们只包含字符、数字和下划线,如果键有特殊字符,如 -
在你的情况下,你必须在它们周围加上引号。例如
{this is not valid: 'Not OK'}
不是有效的对象语法,要使其有效,请在键 {'this is now valid': 'OK now'}