javascript - 如何在 Angular 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]);      

}

在上面的代码中，我有一个 Initailstatus 数组，它告诉我哪些复选框被选中和未选中......基于显示复选框后的情况。当我更改选中的复选框时显示它以取消选中它后，它不会在 IntendedDevicesArray 中更新。

Answer 1

因为initialState是数字数组而不是对象。因此 array.indexOf(value) 方法可以找到等于该值的第一个元素。因此，它返回错误的索引；

示例:

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

让您的代码正常工作。
更改自
<input ... (change)="search(initial, $event)" />
到
<input ... (change)="search(j, $event)" />

并更改搜索功能:

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

}

除此之外，我建议您使用initialState作为 bool 数组来窃取数字。
user *ngIf="initial"表示选中，*ngIf="!initial"表示未选中。在搜索功能中

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

如果你想让你的代码更短更好，你可以编写支持输入标签两种方式绑定(bind)的指令。