以不同方式调用 CSS 类时，ngClass 不起作用？答案

【问题标题】：ngClass not working when calling a css class diferently?以不同方式调用 CSS 类时，ngClass 不起作用？
【发布时间】：2019-05-27 07:55:26
【问题描述】：

我遇到了一个问题，更像是在使用 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>

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

【问题讨论】：

重复stackoverflow.com/questions/15557151/…
@racraman 谢谢，我不知道如何搜索。
很高兴为您提供帮助 :) 我发现在搜索方面效果很好的是主要的“外部”主题，然后是细节 - 所以在这种情况下，我通过谷歌搜索“ngclass hyphen”找到了这篇文章

【解决方案1】：

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

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

【讨论】：