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

Question

不确定我做错了我在我的角度应用程序中设置了一个类切换，它似乎没有工作

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;
  }

任何帮助将不胜感激！

Answer 1

如果您的课程已预先定义，则最好使用[class.usersettings-active]="isUserSettingsActive"代替[ngClass]. [ngClass]，以便动态添加课程。但是对于这个问题，我认为您的表达式应该看起来像[ngClass]="isUserSettingsActive ? 'usersettings-active' : ' '"，请注意空字符串' '。