angular - fa 图标在使用 ngClass 时无法更改

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

为此，我正在使用：

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

isItemSelected(item) 返回 true 或 false

但是，即使从 TypeScript 代码传递了 UI 的 true 和 false 值，我也看不到复选框图标发生变化。

有人能帮我吗。

完整代码片段：

Angular 侧：

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

TypeScript 侧：

  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

答案＃1

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

所以你本质上需要更改你的代码以

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

答案＃2

更新

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

原始

类名字符串需要加上引号

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

提示

你还应该意识到，每次运行变更检测时都会调用 isItemSelected(item)（这可能非常频繁），这可能会影响你应用的响应速度。

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

我假设isItemSelected(item)只做很少的工作，所以可能没问题，但你应该意识到这可能会引起麻烦。