提问者:小点点

如何在Angular 2中设置和捕获未选中和选中的复选框?


在上面的代码中,我想显示UI中initialstatus数组中提到的复选框的初始状态,然后我可以随机更改initialstatus中的任何复选框。。这应该反映在initialstatus数组中。

 <div class="container" [hidden]="submitted">
       <form   ng-app="app" (submit)="onSubmit()">
      <div *ngFor="let initial of initialState,let j = index" >
    <div *ngIf="initial.checked==true">
     <button class="button" type="button">Device{{j}} </button>
       &nbsp; 
       <label class="switch">
         <input type="checkbox" name= "checked" id="checkbox_category" checked    />
        <div class="slider round"></div>
      </label>
       <br/> 
    </div>

    <div *ngIf="initial.checked==false">
       <button class="button" type="button">Device{{j}}</button>
       &nbsp; 
       <label class="switch">
         <input type="checkbox"  id="checkbox_category" name= "checked"   />
        <div class="slider round"></div>
      </label>
       <br/> 
       </div>
    </div>
    <button class="buttons" type="submit">Submit</button>

    <button (click)="resetAll()">Reset</button>
    <button (click)="selectAll()">selectALL</button>
    </form>

    </div>

组件:

export class DashboardComponent{

submitted:boolean;
 model= new SendDetails();

  initialState:any = [{checked:true},{checked:false},{checked:true},{checked:false},{checked:true},{checked:false}];

  intendedDeviceStatus: any = this.initialState;

   constructor(
    ) {
        this.submitted=false;
        }

  onSubmit(){
      this.submitted=true;
      this.model.initSession();

  }

resetAll() {
  this.initialState.forEach((initial:any) => {
   initial.checked = false;
  }
)}
selectAll() {
  this.initialState.forEach((initial:any) => {
   initial.checked = true;
  }
)}
}
}

但这并没有发生。。。。我能够单独显示初始状态,在UI中所做的任何更改都会反映回数组中。要实现InitialStatus显示我的输入标签如上所述,要实现双向绑定,我需要将ngModel添加到我的输入标签
中。但我无法同时实现这两个目标。如何实现双向绑定,并将一些复选框显示为选中,少数复选框显示为未选中。


共2个答案

匿名用户

input type=“checkbox”checked={{initial.checked}。这将根据数组中的内容将初始选中状态设置为true或false。当用户的更改也将反映在您正在重复的数组中时。

匿名用户

你只需一个循环就可以得到这些

模板:

<form (submit)="register()">
            <div *ngFor="let initial of initialState,let j = index" >
                <button class="button" type="button">Device{{j}} </button>
                &nbsp; 
                <label class="switch">
                    <input type="checkbox" name= "checked[{{j}}]" [(ngModel)]='initialState[j].checked'/>
                <div class="slider round"></div>
                </label>
                <br/> 
            </div>
            <button class="buttons" type="submit">Submit</button>
        </form>

组件:

initialState:any = [{'checked':true},{'checked':false},{'checked':true},{'checked':false},{'checked':true},{'checked':false}];

register()
{
  console.log(this.initialState);
}

修改了首字母State: any一点点。

对于您的plunker,只需更改以下行:

<input type="checkbox" name="checked" [checked]='initialState[j].checked' (change)='initialState[j].checked = $event.target.checked' />

您也可以在这里查看:Plunker