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

原文由 Hongbo Miao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的。你写的作品：

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

普朗克

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

• 一串以空格分隔的 CSS 类名（这是您的表达式返回的内容）
• 一组 CSS 类名
• 一个对象，以 CSS 类名作为键，布尔值作为值

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

原文由 Mark Rajcok 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以试试这个：

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

这对我有用

原文由 Donkixoot 发布，翻译遵循 CC BY-SA 4.0 许可协议