fa 图标不随 ngClass 改变答案

【问题标题】：fa icons not changing with ngClassfa 图标不随 ngClass 改变
【发布时间】：2018-02-26 08:12:32
【问题描述】：

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

为此我正在使用：

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

isItemSelected(item) 返回真或假

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

谁能帮帮我。

完整代码片段：

角边：

   <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

【问题讨论】：

标签： angular typescript

【解决方案1】：

更新

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

原创

类名字符串需要加引号

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

提示

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

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

我假设isItemSelected(item) 只做很少的工作，所以可能没问题，但你应该知道这可能会导致麻烦。

【讨论】：

抱歉，忘记添加[]。
请查看我有问题编辑的完整代码
如果静态添加class="fa-check-square"，是否显示复选标记？如果确实添加了<span>isSelected: {{isItemSelected(item)}}</span> 以检查isItemSelected(item) 是否确实返回了您期望的结果。
当我们点击复选框时，看到编辑的问题布尔值正在发生变化，但它没有被复选框图标取代。
让我们continue this discussion in chat。

【解决方案2】：

我遇到了同样的问题。我设法修复它，将fa 添加到班级：

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

【讨论】：

【解决方案3】：

在ngClass 中，key 是您要添加的类，value 是条件，如果为 true，则添加该类，否则不添加。

所以您基本上需要将代码更改为

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

【讨论】：

除非isItemSelected 做错了什么，否则我不明白为什么它不应该工作。你可以检查一次吗？
看到编辑的问题布尔值在我们点击复选框时发生变化，但它没有被复选框图标取代。

【解决方案4】：

你也可以试试这个：

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

并处理组件中的状态值（check-square 或 square）。

【讨论】：

【解决方案5】：

您需要绑定 ngClass 属性，即像这样使用 [] 括号。还可以在类名中使用单引号。

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

我希望这行得通。

【讨论】：

【解决方案6】：

根据您的问题，我们可以在您的 (.ts) 文件中定义一个变量，该变量将像这样调用 html 文件：

<fa-icon [icon]="isItemSelected ? fa-check-square : fa-square">{{isItemSelected}}</fa-icon>

【讨论】：