Angular 5中ngClass失效：SoundCloud播放器图标切换异常求助

嘿，我来帮你搞定这个图标不切换的问题～ 控制台里playMode变量已经正常切换了，说明逻辑没问题，问题大概率出在模板绑定的指令支持或者Font Awesome资源引入上，咱们一步步排查：

1. 检查CommonModule是否正确导入 #

你虽然在组件里导入了NgClass，但Angular 5中NgClass这类通用指令是属于CommonModule的，必须在组件所属的模块（比如AppModule或者专门的ScPlayerModule）里导入这个模块，否则模板里的ngClass指令不会生效。

打开你的模块文件，添加CommonModule到imports数组：

import { CommonModule } from '@angular/common';
import { ScPlayerComponent } from './sc-player.component';

@NgModule({
  imports: [
    CommonModule, // 这一步很关键，不能少！
    // 其他你需要的模块，比如BrowserModule之类的
  ],
  declarations: [ScPlayerComponent]
})
export class YourModuleName { }

2. 确认Font Awesome资源已正确加载 #

如果图标完全不显示，或者切换时没变化，可能是Font Awesome的CSS没引入到位：

• CDN方式：在index.html里添加Font Awesome的CDN链接（注意选对应版本，比如Font Awesome 5，因为你用了fas类）：

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

• 本地安装方式：如果是npm安装的Font Awesome，需要在angular.json的styles数组里配置路径：

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

3. 简化类绑定方式排查问题 #

有时候ngClass的对象语法可能因为空格或者写法细节出问题，你可以试试更直观的[class.*]绑定方式，替换原来的i标签：

<span id="play" (click)="toggleIcon()">
  <i class="fas positionPlay" [class.fa-play]="playMode" [class.fa-pause]="!playMode"></i>
</span>

这种方式把固定类（fas和positionPlay）写在class属性里，动态类用[class.类名]绑定到变量，更容易排查问题。

额外验证：确认模板能读取到playMode #

你可以在模板里直接打印playMode的值，看看页面上是否跟着点击切换：

<p>当前状态：{{ playMode ? '播放中' : '已暂停' }}</p>
<span id="play" (click)="toggleIcon()">
  <i [ngClass]="{'fas fa-pause positionPlay': !playMode, 'fas fa-play positionPlay': playMode}"></i>
</span>

如果这段文字能正确切换，说明变量在模板里是可访问的，就可以排除变量作用域的问题。

按照这几步来，应该就能解决图标不切换的问题啦～

内容的提问来源于stack exchange，提问作者Christophe Chenel