为什么我的班级不点击Angular 4切换

Question

Not sure what Im doing wrong Ive set up a class toggle in my angular app and it doesnt seem to be working

CHATSIDEBAR.COMPONENT.HTML

 <div id="chatsidebarheader">
        <h3><img src="{{meddyLogo}}"> Chat with Meddy</h3>
        <div (click)="userSettingsClass()">
            <img id="usersettingsbutton" src="{{userSettingsLogo}}">
        </div>
</div>
<div id="chatbar-usersettings" [ngClass]="{'usersettings-active': isUserSettingsActive}">
    <h1>User Settings</h1>
</div>

CHATSIDEBAR.COMPONENT.TS

  isUserSettingsActive = true;

  userSettingsClass(){
      this.isUserSettingsActive = !this.isUserSettingsActive;
  }

any help would be appreciated thanks!

Answer 1

If your class is predefined it's better to use [class.usersettings-active]="isUserSettingsActive" instead of [ngClass]. [ngClass] [ngClass]. [ngClass] should be used for dynamicaly added classes. However for this problem I think your expression should look like [ngClass]="isUserSettingsActive ? 'usersettings-active' : ' '" , please note that empty string ' ' .