大佬教程收集整理的这篇文章主要介绍了Angular 2 – Checkbox未保持同步,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个复选框列表.我试图在未检查到最后的复选框时检查所有的复选框.
<div *ngFor="let filter of filters"> <label htmlFor="check-Box-{{filter.text}}" [ngClass]="(filter.SELEcted)? 'active' : '' "> <input type="checkBox" name="check-Box-{{filter.text}}" [checked]="filter.SELEcted" (changE)="onSELEctFilter(filter)" attr.id="check-Box-{{filter.text}}"> {{filter.SELEcteD}} - ({{filter.counter}}) </label> </div>
TS
onSELEctFilter(filter: Filter){ filter.toggleSELEction(); let isAnyFilterSELEcted = this.filters.find(filter => filter.SELEcted); // If no filter is SELEcted then ALL filters are SELEcted if(!isAnyFilterSELEcted){ this.filters.forEach(filter => filter.SELEcted = true ); } }
我为它创造了一个plunker.
https://plnkr.co/edit/uzF6Lk5fxRZjXBOaS9ob?p=preview
如果取消选中checKED属性为TRUE的唯一复选框,我希望所有复选框都具有checKED属性.这不会发生.
有任何想法吗?
<div *ngFor="let filter of filters"> <label htmlFor="check-Box-{{filter.text}}" [ngClass]="(filter.SELEcted)? 'active' : '' "> <input type="checkBox" name="check-Box-{{filter.text}}" [ngModel]="filter.SELEcted" (ngModelChangE)="onSELEctFilter($event,filter)" attr.id="check-Box-{{filter.text}}"> {{filter.SELEcteD}} - ({{filter.counter}}) </label> </div>
onSELEctFilter(SELEcted:Boolean,filter: Filter){ filter.SELEcted=SELEcted; if(this.filters.every(filter=>!filter.SELEcted)){ setTimeout(()=>{ this.filters.forEach(filter=>filter.SELEcted=truE); }); } }
“为什么需要这么多诡计呢?”
实际上,因为从变换检测器的角度来看,先前状态和新状态之间没有变化.
因此,不需要更新子项的@input()/调用ControlValueAccessor
的writeValue()方法(< input type =“checkBox”[ngModel] =“foo”>).
使用setTimeout,首先将属性更新为false,然后将其更改延迟回初始状态,从而允许新的更改检测周期.
另请注意,像(ngModelChangE)这样的事件与更改检测周期无关.
没有setTimeout():
在这里,我们将得到与您的示例相同的结果,当我们保持foo为真时,复选框将不会更新:
@Component({ SELEctor: 'my-app',template: ` <input id="foo" type="checkBox" [ngModel]="foo" (ngModelChangE)="fooChange($event)"><label for="foo">{{foo}}</label> `,}) export class App { filters:[]; foo=true fooChange(newValue:Boolean){ if(newValue===falsE) this.foo=true; // if newValue is false,foo becomes true else this.foo = newValue; // otherwise,do change } }
引擎盖下发生了什么:
@L_696_28@
使用setTimeout()
这次我们将使用setTimeout延迟将值重置为下一个tick:
@Component({ SELEctor: 'my-app',}) export class App { filters:[]; foo=true fooChange(newValue:Boolean){ this.foo=newValue; // we need to make it change ! setTimeout(()=>{ if(newValue===falsE) this.foo=true; // if newValue is false,do change }) } }
引擎盖下发生了什么:
以上是大佬教程为你收集整理的Angular 2 – Checkbox未保持同步全部内容,希望文章能够帮你解决Angular 2 – Checkbox未保持同步所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。