如何在角度2中存储复选框的已选中或未选中事件

Question

<form (submit)="onSubmit()">
  <div class="container">
      <div *ngFor="let initial of initialState,let j = index" >
          <div *ngIf="initial>0">


              <button class="button" type="button">Device {{j}}</button>
              &nbsp; 
              <label class="switch">
                  <input type="checkbox"  id="checkbox_category" checked (change)="search(initial, $event)" />
                  <div class="slider round"></div>
              </label>
          <br/> 
          </div>

          <div *ngIf="initial===0">
              <button class="button" type="button">Device {{j}}</button>
              &nbsp; 
              <label class="switch">
                  <input type="checkbox"  id="checkbox_category" (change)="search(initial, $event)" />
                  <div class="slider round"></div>
              </label>
          <br/> 
          </div>
      </div>
  </div>
  <button class="button" type="button">Submit</button>
 </form>

export class DashboardComponent{

  initialState:any = [1,1,1,0,0,0,1];
  intendedDeviceStatus: any = this.initialState;

  search(category:any, event:any) {

        var index = this.initialState.indexOf(category);
        this.intendedDeviceStatus[index]= (~this.intendedDeviceStatus[index]);      

}

In the above code I have a Initailstatus array which gives me which checkboxes are checked and unchecked ....based on that after displaying checkboxes. After Displaying it when I change checked checkbox to uncheck it not getting updated in IntendedDevicesArray .

Answer 1

Because initialState is array of number not object. so the method array.indexOf(value) with find the first element that equal the value. therefore, it return wrong index;

Example:

var a = [1,1,1,0, 0 ,0,1];
var b = a[2];
var c = a.indexOf(b); c = 0 not 2

To make your code work.
change from
<input ... (change)="search(initial, $event)" />
to
<input ... (change)="search(j, $event)" />

and change search function:

search(index:number, event:any) {
    this.intendedDeviceStatus[index]= this.intendedDeviceStatus[index] ? 1 : 0;      

}

Beside that, I suggest you use initialState as boolean array insteal of number.
user *ngIf="initial" for checked and *ngIf="!initial" for unchecked. in search function

this.intendedDeviceStatus[index] = !this.intendedDeviceStatus[index];

if you want to your code for more short and better, you can write directive that support two way binding for input tag.