ngClass 在组件中使用对象时不会切换值

Question

当我使用以下代码切换类时，一切正常

<p [ngClass]="idPresent ? 'alert alert-success' : 'alert alert-danger'">
  Working
</p>

更改组件中

IdPresent

的值时，我可以看到正在应用的相应类，

但是当我在组件中使用一个对象用于相同目的时，它仅在

idPresent

是

false

时才有效。当我将

idPresent

设置为

true

时，以下代码不会应用适当的类。

<p [ngClass]="idValueClass">
   Not working
</p>

public idPresent = false;
 
public idValueClass = {
  "alert alert-success" : this.idPresent,
  "alert alert-danger"  : !this.idPresent
};

有人可以帮我弄清楚我做错了什么吗？

Answer 1

我相信您提到了“alert”类被删除的问题。

来自文档，

Object - 键是 CSS 类，当值中给出的表达式计算结果为真值时添加，否则它们将被删除。

这导致最后一个“警报”是

false

，将从班级中删除。

修改

idValueClass

如下：

public idValueClass = {
  alert: true,
  'alert-success': this.idPresent,
  'alert-danger': !this.idPresent,
};