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

【问题标题】：ngClass with multiple conditions false condition not working具有多个条件的 ngClass 错误条件不起作用
【发布时间】：2019-01-02 16:02:58
【问题描述】：

我正在尝试使用具有多个条件的 [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，结果也是一样。

【问题讨论】：

【解决方案1】：

这会起作用。

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

【讨论】：

【解决方案2】：

通过查看您的代码很难判断。但是你可以试试这个：

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

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

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

【讨论】：