今天在做需求的时候出现了这样一个问题,
<div class="apply_text">
<div class="apply_head" *ngIf="applyrecordlist.productType!='205'"><span class="apply_name">{{applyrecordlist.productName}}</span><span class="apply_status" [class.status1]="applyrecordlist.status==1"
[class.status2]="applyrecordlist.status==2" [class.status3]="applyrecordlist.status==3" [class.status4]="applyrecordlist.status==4"
[class.status5]="applyrecordlist.status==5" [class.status99]="applyrecordlist.status==99" [class.status7]="applyrecordlist.status==7"
[class.status8]="applyrecordlist.status==8" [class.status10]="applyrecordlist.status==10" [class.status20]="applyrecordlist.status==20"
[class.status21]="applyrecordlist.status==21" [class.status22]="applyrecordlist.status==22" [class.status23]="applyrecordlist.status==23"
[class.status24]="applyrecordlist.status==24" [class.status25]="applyrecordlist.status==25" [class.status26]="applyrecordlist.status==26"><span>{{applyrecordlist.status | applystatus}}</span></span>
</div>
***<div class="apply_head" *ngIf="applyrecordlist.productType=='205'"><span class="apply_name">{{applyrecordlist.productName}}</span><span class="apply_status" [class.status1]="applyrecordlist.status==1 || applyrecordlist.status==31"
[class.status2]="applyrecordlist.status==2 || applyrecordlist.status==3 || applyrecordlist.status==4 || applyrecordlist.status==30"
[class.status5]="applyrecordlist.status==5 || applyrecordlist.status==19" [class.status99]="applyrecordlist.status==6"><span>{{applyrecordlist.status | newApplystatus}}</span></span>
</div>***
</div>
上面是发现问题修改之后的代码,下面是原先的代码
<div class="apply_head" *ngIf="applyrecordlist.productType=='205'"><span class="apply_name">{{applyrecordlist.productName}}</span><span class="apply_status" [class.status1]="applyrecordlist.status==1"
[class.status2]="applyrecordlist.status==2" [class.status2]="applyrecordlist.status==3" [class.status2]="applyrecordlist.status==4"
[class.status5]="applyrecordlist.status==5" [class.status5]="applyrecordlist.status==19" [class.status2]="applyrecordlist.status==30"
[class.status99]="applyrecordlist.status==6" [class.status1]="applyrecordlist.status==31"><span>{{applyrecordlist.status | newApplystatus}}</span></span>
</div>
和上面最后一个div里面的内容相对比,就可以发现问题了,首先我现在开发的这个项目是angular+ionic,所以class类都是根据条件的true或者false来添加的。
刚开始时,我这边状态值返回的是status=1,按照条件判断的话,这时候apply_status这个span应该加上status1这个class类了,但是去查看效果的时候,却没有效果,why?如果返回的状态值status=31的话,这是status1这个class类就加上了,这时候我就更加疑惑了,都是在true的情况下,为什么一个生效了,一个没有生效?百思不得其解,最后豁然开朗。原来是这样的。
请听我慢慢解释,首先状态值status=31的时候,这时候样式status1的增加是在样式增加的最后面,而状态值status=1的时候,样式status1的增加是在样式增加的最前面,判断过之后,这时增加了status1的class类已经加上了,但是样式还会往下走,去一个一个地去检验样式,一个一个地去添加样式,到最后了,由于这时候status=1,而最后的status=31时才会是true,所以这时候status1就是false了,就加不了了,说白了就是后面的把前面的给覆盖掉了。
从这个我得出了这样一条结论,样式的添加思维和js的思维是不一样的,原先可能认为当status等于某个值得时候就不往下执行了,但是这个思维在样式的思维里是走不通的,要谨记!
最后执行的样式会把前面的给覆盖掉!