ngClass不同地调用css类时不起作用？

Question

我有问题，更像是在理解为什么使用ngClass指令时代码不起作用的麻烦。 我在component.css

中有这个CSS类

.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类看起来像这样

.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'}周围加上引号