使用angular 4获取数组格式的多个复选框值

Question

Component.html

  <div class="tab-content">
     <div class=" fl-wrap filter-tags" *ngIf="selected">
         <label *ngFor="let category of selected.categoryServicemodel; let i = index">
            <input type="checkbox" (click)="onCheck(category)"
                class="form-control" value="!!category.isActive"
                (ngModelChange)="category.isActive = $event ? 1 : 0"
                name="index{{i}}"
            >
            {{category.serviceName}}
         </label>
     </div>
  </div>

这是我的组件。

export class Component {
 selectedServe: [];

   constructor(){
    this.service.getAllCategories()
       .subscribe((categories:any )=>{           
         this.values = categories.json();
         console.log(this.values);
       })

  this.service.getAllServices()
      .subscribe((services:any )=>{
        this.serv = services.json();
        console.log(this.serv)
      })
    }

 onCheck(service){
  this.selectedServe = service.serviceId;
  console.log(this.selectedServe);
 }

现在，当我选择复选框时，我将有多个复选框，每个值ID应存储在数组格式变量中

Answer 1

如模板中所示，您的复选框不会获得“值ID”，因此这是一种解决方案，可获取一系列已检查名称。根据需要进行调整。

get checkedServiceNames() {
    return this.selected.categoryServicemodel
        .filter(category => !!category.isActive)
        .map(category => category.serviceName);
}

通过将其放入模板进行测试：

{{ checkedServiceNames | json }}

Answer 2

示例： 在组件中获取1个数组变量，然后将复选框与该组件绑定。

elm=[true, false, false, true];

go(){
    console.log(this.elm); // For verification
  }

<input type="checkbox"  (change)="go()" [(ngModel)]="elm[0]">1 <br>
<input type="checkbox" [(ngModel)]="elm[1]">2 <br>
<input type="checkbox" [(ngModel)]="elm[2]">3 <br>
<input type="checkbox" [(ngModel)]="elm[3]">4