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

发布时间：2020-12-17 06:48:59 所属栏目：安全来源：网络整理

导读：当我使用带有公共类的多个表达式的ngClass时,当表达式从false变为true时,将删除公共类c1： span [ngClass]="{'c1 c2' : showTwo,'c1 c3' : showThree,'c1 c4' : showFour}" /span 为了解决这个问题,我必须使用标准的class属性指定公共类. span class="c1" [n

当我使用带有公共类的多个表达式的ngClass时,当表达式从false变为true时,将删除公共类c1：

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

为了解决这个问题,我必须使用标准的class属性指定公共类.

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

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

解决方法

这不受支持.

https://github.com/angular/angular/issues/5763#issuecomment-163710342

So we are kind of saying “I want to have and not have foo class at the same time” which obviously doesn’t make sense. It is an order of class addition / removal that will lead to different results – this is not something deterministic.

I guess you need to change your code to be sth like: [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}" can be broken down to:

1.1: If isOn evaluates to true,add classes active,has-error and has-feedback.

1.2: If isOn evaluates to false,remove classes active,has-error and has-feedback.

2.1: If isDisabled evaluates to true,add classes disabled,has-success and has-feedback.

2.2: If isDisabled evaluates to false,remove classes disabled,has-success and has-feedback.

There is no way to keep track of how the classes were added to the element’s classList or who added them and it’s not ng-class’ purpose to do so. It just applies the rules it knows about.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!