fa图标不随ngClass更改

Question

当用户选择复选框或取消复选框时，我尝试在复选框和取消复选框之间切换。

为此，我使用：

<i class="far" ngClass="isItemSelected(item) ? fa-check-square : fa-square"></i>

isItemSelected(项)返回true或false

但是，即使在ui上，我也看不到复选框图标正在更改，并且从类型记录代码中传递了false值。

​

​

有人能帮我吗。

完整代码片段：

角侧：

   <ng-container *ngFor="let item of items;let i = index">
                        <div class="tiles">
                            <li>{{item}}</li>
                            <div class="deviceinfo-check-box" (click)="selectedItem(item)">                         
                              <i class="far" [ngClass]="isItemSelected(item) ? 'fa-check-square' : 'fa-square'"></i>
                            </div>
                        </div>
    </ng-container>

TypeScriptSide：

  selectedItem(item) {
        if (this.selecteditems.indexOf(item) < 0) {
            this.selecteditems.push(item);
        } else {
            this.selecteditems.splice(this.selecteditems.indexOf(item), 1);
        }
    }



    isItemSelected(item) {
        return this.selecteditems.indexOf(item) < 0 ? false : true;
    }

​

​

使用{{isItemSelected(IotGateway)}->获得的这些真假值

网址：https://angular-m56o7e.stackblitz.io

Answer 1

在ngClass中，键是要添加的类，值是条件，如果条件为真，则类将被添加，否则它不会添加。

因此，您实际上需要将代码更改为

<i class="far" 
  [ngClass]="{
    'fa-check-square': isItemSelected(item),
    'fa-square': !isItemSelected(item)
  }"
>
</i>

Answer 2

更新

问题是FontAwesome用<svg>元素替换了<i>元素，这导致绑定类消失。我建议使用类似npmjs.com/package/angular2-fontawome之类的方法来解决这个问题。

原始

类名字符串需要放在引号中。

<i class="far" [ngClass]="isItemSelected(item) ? 'fa-check-square' : 'fa-square'"></i>

提示

您还应该注意，每次运行更改检测时都会调用isItemSelected(item) (这可能非常频繁)，这可能会损害应用程序的响应能力。

通常最好将计算结果添加到属性中，然后绑定到该属性。

我假设isItemSelected(item)只做了很少的工作，所以它可能是可以的，但是您应该知道这会带来麻烦。

Answer 3

我也有同样的问题。我设法修复了它，将fa添加到类中：

<i class="far fa" [ngClass]="isItemSelected(item) ? 'fa-check-square' : 'fa-square'"></i>