javascript - 如何检查哪个输入复选框标签随 Angular 2中的值发生变化？

Question

在下面给出的代码中，我可以随机选中或取消选中任意数量的复选框。

    <button class="button" type="button">Device 1</button>
   &nbsp; <label class="switch">
  <input name="device1" type="checkbox" [(ngModel)]={{device1}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
 <br/> <button  class="button" type="button">Device 2</button>
    &nbsp; <label class="switch">
  <input name="device2" type="checkbox"  [(ngModel)]={{device2}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
   <br/> <button class="button" type="button">Device 3</button>
    &nbsp; <label class="switch">
  <input  name="device3" type="checkbox" [(ngModel)]={{device3}} (ngModelChange)="OnInput($event)" >
  <div class="slider round"></div>
</label>
   <br/> <button  class="button" type="button">Device 4</button>
    &nbsp; <label class="switch">
  <input  name="device4" type="checkbox" [(ngModel)]={{device4}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
  <br/>  <button class="button" type="button">Device 5</button>
    &nbsp; <label class="switch">
  <input name="device5" type="checkbox"[(ngModel)]={{device5}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
  <br/>  <button class="button" type="button">Device 6</button>
    &nbsp; <label class="switch">
  <input  name="device6" type="checkbox"[(ngModel)]={{device6}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
  <br/>  <button class="button" type="button">Device 7</button>
    &nbsp; <label class="switch">
  <input name="device7" type="checkbox" [(ngModel)]={{device7}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
  </div>
export class DashboardComponent{


    OnInput(value:any){
        console.log(value);
    }

我想知道哪个输入标签正在被选择并带有值...并且只想获取带有输入名称和值的已更改复选框详细信息

Answer 1

您可以将 angular2 的命名标识符/引用 #the_name 传递给每个输入并将其传递到方法中:

  <input name="device1" type="checkbox" 
   #device1
   [(ngModel)]={{device1}} 
   (ngModelChange)="OnInput($event, device1)"><!--pass it here-->