0

我试图通过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 的回答，我基本上理解了它，但两者都很有帮助。

4

2 回答 2

1

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

您可以在 JSON 中执行此操作：

{
 "key": condition ? value : otherValue
}

但你不能这样做：

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

要做你想做的事，你必须使用[class]而不是[ngCLass]. 像那样：

<div [class]="classFlag ? 'class--true' : 'class--false'">
于 2022-02-11T13:06:23.103 回答
0

它们只是不能以这种方式组合。使用其中一种。对于多条件使用示例 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

于 2022-02-11T12:50:20.950 回答