多个类名在 NgClass 中不起作用

Question

我正在尝试根据 上的条件添加多个类名NgClass。它适用于最后一个条件，但似乎不适用于第二个条件。在检查器中看起来好像fas第二个条件错过了课程。

<i [ngClass]="{'pr-1' : true,
               'valid-group fas fa-check-circle ' : isGroupValid('vg1'),
               'invalid-group fas fa-exclamation-circle' : !isGroupValid('vg1')}"></i>

这会正确显示感叹号图标，但不显示复选圈，如果我交换顺序，则复选圈有效但不是感叹号。这让我相信第二种情况下的课程与最后一种情况不同，这是正确的吗？

Answer 1

在您的ngClass指令中，fas“有效组”条件中设置的类可见性被“无效组”条件中设置的类覆盖。由于pr-1和fas类始终存在，您可以将它们从ngClass指令中取出：

<i class="pr-1 fas" 
  [ngClass]="{'valid-group fa-check-circle ' : isGroupValid('vg1'),
              'invalid-group fa-exclamation-circle' : !isGroupValid('vg1')}">

如果只想isGroupValid('vg1')评估一次，可以使用：

<i class="pr-1 fas" 
  [ngClass]="isGroupValid('vg1') ? 'valid-group fa-check-circle' : 'invalid-group fa-exclamation-circle'">