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'">

多个类名称在NgClass中不起作用

1 个答案: