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}"

... thnks