Angular 2 – Checkbox未保持同步

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

导读：我正在研究Angular 2.0(是的,有点落后于当前的2.4). 我有一个复选框列表.我试图在未检查到最后的复选框时检查所有的复选框. HTML div *ngFor="let filter of filters" label htmlFor="check-box-{{filter.text}}" [ngClass]="(filter.selected)? 'active' :

我正在研究Angular 2.0(是的,有点落后于当前的2.4).

我有一个复选框列表.我试图在未检查到最后的复选框时检查所有的复选框.

HTML

<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>

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属性.这不会发生.

enter image description here

有任何想法吗？

解决方法

您应该使用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);
      });
    }
}

plunkr

“为什么需要这么多诡计呢？”

实际上,因为从变换检测器的角度来看,先前状态和新状态之间没有变化.

因此,不需要更新子项的@Input()/调用ControlValueAccessor的writeValue()方法(< input type =“checkbox”[ngModel] =“foo”>).

使用setTimeout,首先将属性更新为false,然后将其更改延迟回初始状态,从而允许新的更改检测周期.

另请注意,像(ngModelChange)这样的事件与更改检测周期无关.

没有setTimeout()：

在这里,我们将得到与您的示例相同的结果,当我们保持foo为真时,复选框将不会更新：

代码(plunkr)：

@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
  }
}

引擎盖下发生了什么：

enter image description here

使用setTimeout()

这次我们将使用setTimeout延迟将值重置为下一个tick：

代码(plunkr)：

@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  
    })
  }
}

引擎盖下发生了什么：

enter image description here

（编辑：李大同）

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