我正在研究Angular 2.0(是的,有点落后于当前的2.4).
我有一个复选框列表.我试图在未检查到最后的复选框时检查所有的复选框.
<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属性.这不会发生.
有任何想法吗？
解决方法
您应该使用ngModel而不是绑定到checked,并使用setTimeout.
<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
}
}
引擎盖下发生了什么：
使用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
})
}
}
引擎盖下发生了什么：
