时间戳

首页 > 解决方案 > 以不同方式调用 css 类时 ngClass 不起作用？

angular - 以不同方式调用 css 类时 ngClass 不起作用？

问题描述

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

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

标签： angularangular-directiveng-class

解决方案

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

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

推荐阅读