Angular 使用求值表达式的ngClass删除公共类

当我将ngClass与具有公共类的多个表达式一起使用时，当表达式从false变为true时，公共类

c1

将被删除：

<span [ngClass]="{'c1 c2' : showTwo, 'c1 c3' : showThree, 'c1 c4' : showFour}" ></span>

有没有更好的方法来实现这一点？或者是Angular2的错误？

不受支持

所以我们说“我想同时拥有和不拥有

foo

class”，这显然是没有意义的。这是一个类添加/删除的顺序，将导致不同的结果-这不是确定性的

我想您需要将代码更改为如下内容：

[ng class]=“{'active has error'：isOn，‘disabled has success'：isDisabled，'has feedback'：isOn | | isDisabled}”

github讨论的下一步

[ng class]=“{'active has error has feedback'：isOn，'disabled has success has feedback'：isDisabled}”

可以分解为：

1.1：如果isOn的计算结果为true，则添加活动类、有错误且有反馈

1.2：如果isOn的计算结果为false，则删除活动类、有错误且有反馈

2.1：如果isDisabled的计算结果为true，则AddClasses已禁用、已成功并有反馈

2.2：如果isDisabled的计算结果为false，则移除禁用的类，并获得成功和反馈

无法跟踪类是如何添加到元素的类列表中的，或者是谁添加的，这样做不是ng类的目的。它只是应用它所知道的规则

这是不受支持的

所以我们说“我想同时拥有和不拥有

foo

class”，这显然是没有意义的。这是一个类添加/删除的顺序，将导致不同的结果-这不是确定性的

我想您需要将代码更改为如下内容：

[ng class]=“{'active has error'：isOn，‘disabled has success'：isDisabled，'has feedback'：isOn | | isDisabled}”

github讨论的下一步

[ng class]=“{'active has error has feedback'：isOn，'disabled has success has feedback'：isDisabled}”

可以分解为：

1.1：如果isOn的计算结果为true，则添加活动类、有错误且有反馈

1.2：如果isOn的计算结果为false，则删除活动类、有错误且有反馈

2.1：如果isDisabled的计算结果为true，则AddClasses已禁用、已成功并有反馈

2.2：如果isDisabled的计算结果为false，则移除禁用的类，并获得成功和反馈

无法跟踪类是如何添加到元素的类列表中的，或者是谁添加的，这样做不是ng类的目的。它只是应用它所知道的规则

---

为什么要动态应用/删除一个类两次？如果始终需要使用class

c1

，则将其添加到

class=“c1”

属性中，并对任何有条件的内容使用

[ngClass]

。不是bug，它是html和css的构建块。

为什么要动态应用/删除一个类两次？如果始终需要使用class

c1

，则将其添加到

class=“c1”

属性中，并对任何有条件的内容使用

[ngClass]

。不是一个bug，它是html和css的构建块。

特别是，其中需要显示两个类。它们本质上是相互关联的，所以我希望在代码中保持明确的关系。想想看，ngClass始终是真的还是假的，因此将始终应用一个可选类，因此在属性上声明explicate类永远不会是问题，永远都会有两者的结合。谢谢，我现在更明白逻辑了。无法跟踪表达式添加或删除类的内容，因此会出现不希望出现的结果，因为我需要按顺序应用它，以使

蓝色背景

以这种方式表示，而不是

蓝色背景

，后者在语义上不起作用，需要显示两个类。它们本质上是相互关联的，所以我希望在代码中保持明确的关系。想想看，ngClass始终是真的还是假的，因此将始终应用一个可选类，因此在属性上声明explicate类永远不会是问题，永远都会有两者的结合。谢谢，我现在更明白逻辑了。无法跟踪表达式添加或删除类的内容，因此出现了不希望出现的结果，因为我需要按顺序应用它，以使

blue background

以这种方式表达，而不是

background blue

，它在语义汉克斯中不起作用，github讨论正是我想要的，但找不到汉克斯，github讨论正是我想要的，但找不到

<span class="c1" [ngClass]="{'c2' : showTwo, 'c3' : showThree, 'c4' : showFour}" ></span>