今天用到了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>