Angular中使用对象绑定ngClass无法切换类的问题求助

问题出在你定义idValueClass的方式——它是一个静态对象，初始化时只会读取一次idPresent的初始值（false），之后哪怕idPresent变化，这个对象里的布尔值也不会自动更新。

方法1：用Getter动态计算类对象 #

把idValueClass改成getter属性，这样每次Angular做变更检测时，都会重新计算最新的类映射：

public idPresent = false;

public get idValueClass() {
  return {
    "alert alert-success": this.idPresent,
    "alert alert-danger": !this.idPresent
  };
}

模板保持不变：

<p [ngClass]="idValueClass">
  Now working!
</p>

方法2：手动更新类对象 #

如果不想用getter，也可以在idPresent变化时，手动更新idValueClass的属性值：

修改API回调逻辑：

ngOnInit(): void {
  this.http.get('http://localhost:8083/v1/uniqueid', {
    headers: {'Authorization':'Basic dXNlcjpwYXNzd29yZA=='}
  })
  .subscribe(response => {
    if(response) {
      console.log(response)
      this.serverId = response;
      this.idPresent = true;
    } else {
      this.idPresent = false;
    }
    // 手动更新类对象
    this.idValueClass = {
      "alert alert-success": this.idPresent,
      "alert alert-danger": !this.idPresent
    };
    console.log("idPresent : " + this.idPresent)
  })
}

原写法失效的核心原因 #

你最初定义idValueClass时，this.idPresent是false，所以对象会被初始化为：

{
  "alert alert-success": false,
  "alert alert-danger": true
}

这是一个固定的对象，后续idPresent变化时，这个对象的属性值不会自动跟着变——因为你存的是原始值的副本，不是动态绑定的表达式。

内容的提问来源于stack exchange，提问作者Bagira