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

【问题标题】：Can ngClass use ternary operator in Angular 2?ngClass 可以在 Angular 2 中使用三元运算符吗？
【发布时间】：2016-05-15 19:22:47
【问题描述】：

在 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中仍然可以使用三元运算符。

【问题讨论】：

【解决方案1】：

是的。你写的有效：

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

右侧表达式的结果必须为以下之一：

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

【讨论】：

谢谢，这很奇怪，我的居然是[ngClass]="{message.userId === user._id ? 'message-mine' : 'message-other'}"，这不起作用。但这有效[ngClass]="{'message-mine':message.userId === user._id, 'message-other':message.userId !== user._id}"
@HongboMiao，第一个不应该有{和}。
这是正确答案。最初的问题是关于使用三元运算符 ?

【解决方案2】：

你可以试试下面的.....

对于三元运算符使用：

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

多条件使用：

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

谢谢...

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢，它有效！只是修正一个错字，它是!== 而不是!===
还有<div [class.css-class-1]="varA === varB" [class.css-class-2]="varA !== varB">。据我所知，这是个人偏好，但您希望以哪种方式进行操作。
文档返回 404