Angular 4 中的 [ngClass] 中未显示 font-awesome 图标

Question

我在 Angular 4 HTML 模板中遇到了一个奇怪的错误，我正在尝试切换 <i> 标签的 class，但只有一个class 出现了，但没有出现另一个。这是我的代码；

<i [ngClass]="{'fa fa-eye': visible, 'fa fa-eye-slash': !visible}" aria-hidden="true" (click) = "toggle(pass)"></i>

TS:

visible = false;
toggle(event){
    this.visible = !this.visible;
}

当我检查我的应用程序时，会显示第一个图标，即 fa fa-eye-slash 上的默认图标，但当我单击它时，它只显示框。

编辑：

尝试使用 FA 中的不同图标，但没有任何显示。

Answer 1

您需要将 html 更改为：

<i class="fa" [ngClass]="{'fa-eye': visible, 'fa-eye-slash': !visible}" aria-hidden="true" (click) = "toggle(pass)"></i>

font-awesome icon doesn't show up in [ngClass] in Angular 4