Question

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

我正在使用：

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

isItemSelected（item）返回true或false

但是，即使在ui上，我也看不到复选框图标的变化，而是从打字稿代码传递了false值。

任何人都可以帮助我。

完整代码段：

Angular Side：

   <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）}} - ＆gt;

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

Answer 1

在ngClass键中是要添加的类，值是条件，如果为true，则添加类，否则不添加。

因此，您基本上需要将代码更改为

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

Answer 2

我遇到了同样的问题。我设法修复了它将$full_path_to_file添加到类：

fa

Answer 3

<强>更新

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

<强>原始

类名字符串需要放在引号

中

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

<强>提示

您还应该知道，每次运行更改检测时都会调用isItemSelected(item)（这可能非常频繁），这可能会损害您应用的响应速度。

通常最好将计算结果添加到属性并改为绑定到此属性。

我认为isItemSelected(item)只做很少的工作，所以可能没问题，但你应该知道这会引起麻烦。

Answer 4

你需要绑定ngClass属性，即使用像这样的[]括号。也可以使用带引号的单引号。

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

我希望这有效。

Answer 5

你也可以试试这个：

<i class="fa-{{status}}"></i>

并处理组件中状态（校验方形或方形）的值。

fa图标不随ngClass而改变

5 个答案: