Angular 6 ngClass 没有打开布尔值答案

【问题标题】：Angular 6 ngClass not switching on booleanAngular 6 ngClass 没有打开布尔值
【发布时间】：2018-09-29 12:25:20
【问题描述】：

我有一个简单的问题，但无法解决。我有两个具有不同背景图像的 CSS 类。我想在单击它时切换 div 背景，并保持该类，直到我不切换到另一个 div（菜单项）。这是需要的代码：

.login-switch-button{
    background-image: url("..\..\assets\images\login_button.png"); 
    height: 50px;
    width: 195px;
    float: left;

}
.register-switch-button{
    background-image: url("..\..\assets\images\register_button.png"); 
    height: 50px;
    width: 195px;
    margin: auto;
    float: left;
}

.login-switch-button-active{
    background-image: url("..\..\assets\images\login_button_hover.png"); 
    height: 50px;
    width: 195px;
    float: left;
}

.register-switch-button-active{
    background-image: url("..\..\assets\images\register_button_hover.png"); 
    height: 50px;
    width: 195px;
    float: left;
}

非常简单的 CSS 这里是一个 .ts 文件

 isLoginActive: boolean = true;
  public login_class = {
    "login-switch-button": !this.isLoginActive,
    "login-switch-button-active": this.isLoginActive
  }

  public register_class = {
    "register-switch-button": this.isLoginActive,
    "register-switch-button-active": !this.isLoginActive
  }

  switch_to_login() {
    this.isLoginActive = true;
  }

  switch_to_register() {
    this.isLoginActive = false;
  }

还有 HTML 代码

  <div (click)="switch_to_login()" [ngClass]="login_class"></div>
  <div  (click)="switch_to_register()" [ngClass]="register_class"></div>

在初始化站点时，login_button 处于活动状态，并且背景对两者都是正确的。但是点击其中任何一个都不会改变任何事情。 isLoginActive 值正在正确更改，因此 onClick 工作正常。我想我错过了关于 ngClass 的关键知识

【问题讨论】：

这些对象只在最初定义类时被评估一次。
这是否意味着我在使用特定站点时无法在 css 类之间切换？初始化时只能应用一次吗？
不，你可以更新它，这不是你在做什么。如果您为 isLoginActive 编写了一个设置器（阅读访问器），您可以相应地更新对象。

标签： angular

【解决方案1】：

您可以根据组件属性值应用类。

<div (click)="switch_to_login()" [ngClass]="isLoginActive ? 'css-class1' : 'css-class2'"></div>

如果 isLoginActive 值为 true，将应用 'css-class1'。如果 isLoginActive 值为 false，将应用 'css-class2'。

【讨论】：