具有多个条件的ngClass错误条件不起作用

Question

我正在尝试在多个条件下使用[ngClass]来更改打开/关闭面板的插入符号。

当前，向下箭头可正常使用。 当我单击箭头并且条件变为false时，它将图标更改为一个空框，并且无法识别正确的类名。

<i [ngClass]="{'fa fa-caret-up pull-right': isActive4 == true, 
'fa fa-caret-down pull-right': isActive4 == false}"
(click)="section4Click()"></i>

section4Click（）会根据之前的状态将isActive4更改为true / false。

当我单击向下的插入符号（有效）后检查出现的框的元素时，得到以下类名...

fa-caret-up

而不是...

fa fa-caret-up pull-right

有人知道为什么会这样吗？好像完成了一半的工作... 我也尝试过只做isActive4和！isActive4，同样的事情也会发生。

Answer 1

通过查看代码很难分辨。但是您可以尝试以下方法：

<i class="fa pull-right" [class.fa-caret-up]="isActive4" [class.fa-caret-down]="!isActive4" (click)="section4Click()"></i>

我还建议打印这些值以查看得到的结果：

<p>{{ isActive4 === true }}</p>

Answer 2

这将起作用。

<i class="fa pull-right" [ngClass]="{'fa-caret-up': isActive4 == true, 
'fa-caret-down': isActive4 == false}"
(click)="section4Click()"></i>