Angular 4中[ngClass]绑定的Font Awesome图标无法正常切换显示

我之前在做Angular项目时也碰到过类似的Font Awesome图标切换异常情况，结合你的代码和描述来看，大概率是Font Awesome的引入方式有误或者类名与使用的FA版本不匹配导致的，下面分步骤帮你排查解决：

1. 检查Font Awesome的引入是否正确 #

Angular 4中引入Font Awesome主要有两种方式，你需要确认项目配置是否到位：

方式1：CDN引入（适合快速测试） #

在项目根目录的index.html中，确保已经添加了对应版本的Font Awesome CSS链接。如果是适配Angular 4的Font Awesome 4.x版本，链接应该是这样的：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

如果用的是Font Awesome 5+版本，链接需要包含样式包（比如solid样式）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

方式2：npm本地安装 #

如果你是通过npm安装的Font Awesome，需要在配置文件中添加样式路径：

• 先安装适配版本：npm install font-awesome@4 --save（4.x和Angular 4兼容性更好）
• 打开.angular-cli.json（Angular 4的配置文件，新版本为angular.json），找到styles数组，加入Font Awesome的CSS路径：

  "styles": [
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.css"
  ]
  

2. 确认Font Awesome类名与版本匹配 #

这是最容易踩坑的点：不同版本的FA类名规则不一样，你的代码里用的是旧版类名，要对应上版本：

• Font Awesome 4.x：类名格式是fa fa-图标名，你的代码fa fa-eye和fa fa-eye-slash是正确的。
• Font Awesome 5+：需要额外加样式前缀（比如solid用fas，regular用far），类名格式是fas fa-图标名。如果你的项目装的是FA5，但还是写旧类名，就会显示空白方框，这时候要改成：

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

3. 验证toggle函数是否正常工作 #

虽然你的toggle函数逻辑看起来没问题，但可以加个日志确认状态是否正确切换：

visible = false;
toggle(event){
  this.visible = !this.visible;
  console.log('当前visible状态：', this.visible); // 点击后看控制台输出是否在true/false之间切换
}

如果日志显示状态正常切换，但图标还是空白，那肯定是FA的引入或类名问题；如果状态没切换，再检查点击事件是否绑定正确（比如pass参数是否存在，不过即使参数不对，toggle函数应该还是会执行的）。

4. 临时测试：用*ngIf替代ngClass #

如果怀疑是ngClass的问题，可以换用*ngIf直接切换两个图标标签，看看是否能正常显示：

<i *ngIf="visible" class="fa fa-eye" aria-hidden="true" (click)="toggle(pass)"></i>
<i *ngIf="!visible" class="fa fa-eye-slash" aria-hidden="true" (click)="toggle(pass)"></i>

如果这样能正常切换显示，说明ngClass写法没问题，还是回到FA的引入/类名问题排查；如果还是不行，那100%是FA的配置问题。

内容的提问来源于stack exchange，提问作者Suroor Ahmmad