以不同方式调用 css class 时 ngClass 不起作用？

Question

我遇到了问题，更像是无法理解为什么代码 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>

为什么？我错过了什么？抱歉问这个问题，我可能遗漏了一些基本的东西。

Answer 1

它不编译没有引号的原因，无论是单引号还是双引号，是因为 ngClass 需要一个对象，而在 Javascript 中，对象键不需要引号，如果它们只包含字符、数字和下划线，如果键有特殊字符，如 - 在你的情况下，你必须在它们周围加上引号。例如

{this is not valid: 'Not OK'} 不是有效的对象语法，要使其有效，请在键 {'this is now valid': 'OK now'}

周围加上引号