具有多个条件的 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 右拉

有谁知道为什么会发生这种情况？它似乎完成了一半的工作......我也试过只做 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>