ngClass可以在Angular 2中使用三元运算符吗？

Question

在Angular 1中,下面的代码运行良好.

<div ng-class="$varA === $varB ? 'css-class-1' : 'css-class-2'">

但是当我尝试在Angular 2中做类似的事情时.它不起作用.

我已经添加了 directives: [NgClass]

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

我应该怎么写Angular 2,谢谢!

编辑:这是我的错误,我不小心添加{ }到了整体varA === varB ? 'css-class-1' : 'css-class-2'.所以ngClass仍然可以在Angular 2中使用三元运算符.

Answer 1

是.你写的是什么作品:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

Plunker

右侧表达式的结果必须评估为以下之一:

• 一串以空格分隔的CSS类名(这是表达式返回的内容)
• 一个CSS类名称数组
• 一个Object,CSS类名称作为键,布尔值作为值

也许你的代码中有其他错误？

Answer 2

<div [ngClass]="{'css-class-1':varA === varB, 'css-class-2': varA !== varB}">

另请参见https://angular.io/api/common/NgClass

Answer 3

您可以尝试以下方法......

对于三元运算符使用：

[ngClass]="condition1==condition2?'class-1':'class-2'"

多条件使用：

[ngClass]="{'class-1':condition1==condition2, 'class-2': condition3==condition4}"

谢谢...