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

演示@StackBlitz