Angular 4从复选框中获取值答案

【问题标题】：Angular 4 getting values from checkboxesAngular 4从复选框中获取值
【发布时间】：2017-12-12 20:50:06
【问题描述】：

我是 Angular 的新手，被这个非常简单的问题困住了。我正在从网络服务获取数据以显示几个复选框。我需要一种方法来获取用户选择的所有复选框的值。我正在使用材质主题。

<span *ngFor="let x of maintainanceTypeList">
    <md-checkbox 
       name="{{x.maintenancetype}}" 
       value="{{x.maintenancetype}}"  
       [formControl]="CreateSocietyForm.controls['checkMaintainanceType']">
         {{x.maintenancetype}}
    </md-checkbox>
</span>

【问题讨论】：

标签： angular typescript checkbox angular-material2

【解决方案1】：

您可以使用以下内容代替e.checked：

工作示例

HTML

<input class="form-check-input" type="checkbox" (change)="selectBadge($event, badge._id)">

打字稿

selectBadge (e, id) {

 if (e.target.checked) {
   this.product.badges.push(id);
 }  else {
   this.product.badges.splice(this.product.badges.indexOf(id), 1);
 }

}

【讨论】：

我猜你指的是这个问题的另一个答案。请编辑您的答案以包括在内。将来考虑将诸如 cmets 之类的小添加添加到另一个答案中。奖励：我认为你做了一个无效的假设。您正在使用<input>，而另一个答案正在使用<md-checkbox>。两种类型的事件不同

【解决方案2】：

您可以将change 事件添加到md-checkbox 并将对象传递给函数。维护一个array，跟踪哪些得到了checked 和unchecked，并据此更新数组。

html:

<span *ngFor="let x of maintainanceTypeList">
    <md-checkbox 
       name="{{x.maintenancetype}}" 
       value="{{x.maintenancetype}}"
       (change)="change($event, x)">
         {{x.maintenancetype}}
    </md-checkbox>
</span>

<p> Selected value: {{selectedValue | json}} </p>

component.ts:

export class SelectFormExample {
  selectedValue = [];

  maintainanceTypeList = [
    {maintenancetype: 'Steak'},
    {maintenancetype: 'Pizza'},
    {maintenancetype: 'Tacos'}
  ];

  change(e, type){
    console.log(e.checked);
    console.log(type);
    if(e.checked){
      this.selectedValue.push(type);
    }
    else{
     let updateItem = this.selectedValue.find(this.findIndexToUpdate, type.maintenancetype));

     let index = this.selectedValue.indexOf(updateItem);

     this.selectedValue.splice(index, 1);
    }

  }

  findIndexToUpdate(type) { 
        return type.maintenancetype === this;
    }
}

Plunker demo

【讨论】：

谢谢！我会试试看。