angular7学习笔记（1）——ngClass的简单使用

今天用到了ngClass来实现动态更新图标的功能，简单记录一下

图标库是 font awesome

 

设置 标志 classFlag

  <i class="fa" [ngClass]="{'fa-microphone': classFlag,'fa-microphone-slash': !classFlag}" (click)="disableMic(user.user_id)"></i>

表示：先定义classFlag=true,然后点击事件切换状态，即可改变class

 

注意点：

[ngClass]="{'fa fa-microphone':true}"  它只能获取fa-microphone，而fa获取不到

 

还可以这样写：

<i class="fa" [ngClass]="{'fa-microphone': user.mute==='0','fa-microphone-slash': user.mute==='1'}" (click)="disableMic(user.user_id)"></i>

拓展：

对 icon属性修改：

<button pButton type="button" icon="fa {{micflag ? 'fa-microphone':'fa-microphone-slash'}}" class="voice-btn"></button>