NgClass 可以在角度2中使用三元运算符吗？

在角度1中，下面的代码运行良好。

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

但是当我尝试做类似的事情在角度2。它不工作。

我已经加了 directives: [NgClass]

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

我应该如何写在角2，谢谢！

编辑: 是我的错，我不小心把 { }加到了整个 varA === varB ? 'css-class-1' : 'css-class-2'上。所以 ngClass 仍然可以在角度2中使用三元运算符。

120444 次浏览
小开 
<div [ngClass]="{'css-class-1':varA === varB, 'css-class-2': varA !== varB}">

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

小开
最佳答案

是的，你写的很有效:

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

笨蛋

右侧表达式的结果必须求值为下列值之一:

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

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

小开

你可以试试以下方法... ..。

用于三元操作符:

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

适用于多种情况:

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

觉得..。

小开

你可以试试这个:

也许这个例子会让我们更清楚:

<div [ngClass]="salesVolume <= 55_000 ? 'bg_green' : 'bg_red' " >

Bg _ green 和 bg _ red 是在 style.css 文件中定义的两个类样式

小开

你可以试试这个:

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

这招对我很管用


提交答案