Angular6 不能在具有多个条目的 ngClass 中使用三元运算符

Question

我正在尝试通过 ngClass 添加多个类，我很困惑为什么我不能在这里使用三元运算符。

<div [ngClass]="{'otherClass': otherFlag, classFlag ? 'class--true': 'class--false'}>

我收到以下错误：

Parser Error: Missing expected } at column 37 in [{'otherClass': otherFlag, classFlag ? 'class--true': 'class--false'}]

我知道我可以做到以下几点：

<div [ngClass]="{
'otherClass': otherFlag,
'class--true': classFlag,
'class--false': !classFlag
}">

只是想了解为什么我不能在这里使用三元运算符（或者我做错了）。如果能帮助我理解这一点，我将不胜感激。

编辑：感谢您的回答。由于 Bryan 的回答，我基本上理解了它，但两者都有帮助。

Answer 1

它们不能以这种方式组合。使用一个或另一个。对于多条件使用示例 3，对于长期使用示例 1 或 2。

<div [ngClass]="classFlag === false ? 'class--true' : 'class--false'">
  I will be class false
</div>

<div [ngClass]="classFlag === true ? 'class--true' : 'class--false'">
I will be class true
</div>

<div [ngClass]="{ otherClass: otherFlag === true }">I will be class true</div>

示例：https://stackblitz.com/edit/angular-ivy-hmnctu?file=src%2Fapp%2Fapp.component.html

Answer 2

您不能以这种方式使用三元运算符，因为 ngClass 的值是一个 JavaScript 对象，而您的 class 名称用作该对象的键。三元运算符只能用于值，不能用于键。

您可以在 JSON:

中执行此操作

{
 "key": condition ? value : otherValue
}

但是你不能这样做：

{
 condition ? "key" : "otherKey": value
}

要完成您想做的事，您必须使用 [class] 而不是 [ngCLass]。像那样:

<div [class]="classFlag ? 'class--true' : 'class--false'">

Angular6 不能在具有多个条目的 ngClass 中使用三元运算符

Angular6 Can't use ternary operator in ngClass with multiple entries

angular-ng-class

angular

angular6