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

Question

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

目前向下箭头功能完美。当我单击箭头并且条件更改为 false 时，它会将图标更改为空框并且无法识别正确的 class 名称。

<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，具体取决于之前的内容。

当我检查单击向下插入符（有效）后显示的框的元素时，我得到以下 class 名称...

fa-插入符向上

而不是...

fa fa-插入符上拉

有人知道为什么会这样吗？它似乎完成了一半的工作...... 我也试过只做 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>

ngClass with multiple conditions false condition not working