「すべて」チェックボックスをオンにすると、すべてのチェックボックスを選択する方法は？

Question

私はアングル4で作業しています。 "All"という名前のチェックボックスをオンにすると、すべてのサービス（チェックボックス）を選択する必要があります。

component.ts

industries : any = [ 
    { 
    "industry_name" : "Lawn Care", 
    "value" : "lawn_care", 
    "service_categories" : [ 
     {"service_name" : "Fixed Rate", "status" : true }, 
     {"service_name" : "Hourly",  "status" : true }, 
     {"service_name" : "Re-Clean", "status" : true }, 
     {"service_name" : "Re-Clean 2", "status" : true } 
     ] 
    },... 
]; 

form : FormGroup; 
constructor(private formBuilder : FormBuilder){ 
    this.form = this.formBuilder.group({}); 
} 
ngOnInit(){ 
    for(let industry of this.industries) 
    { 
     let fieldName = industry.value; 
     this.form.addControl(fieldName, new FormArray([])); 

     let serviceArray = <FormArray>this.form.controls[fieldName]; 
     for(let service of industry.service_categories) 
     { 
     let control = this.formBuilder.group({ 
      service_name : [service.service_name], 
      status  : [service.status] 
     }); 
     serviceArray.push(control); 
     } 
    } 
} 
selectAll(event, industry) 
{ 
    let fieldName = industry.value; 
    for(let service of this.form.controls[fieldName].value) 
    { 
    (event.target.checked) ? service.status = true : service.status = false; 
    } 
} 

component.html

<div *ngFor="let industry of industries"> 
     <label>{{industry?.industry_name}}</label> 
     <div> 
     <div *ngFor="let category of industry?.service_categories; let i=index" [formArrayName]="industry.value" > 
      <ng-container [formGroupName]="i"> 
       <input [class]="industry.value" type="checkbox" formControlName="status" > 
       <span>{{category?.service_name}}</span> 
      </ng-container> 
     </div> 
     <div> 
      <input type="checkbox" (change)="selectAll($event, industry)"> 
      <span>All</span> 
     </div> 
     </div> 
    </div> 

私はこのコードを使用しているし、すべてのものは、すべての機能をチェック除いて正常に動作していました。

Answer 1

フォームの値をタップして、チェックボックスに[checked]という属性を付けることができます。むしろ、おそらく醜いが、作品:)

<input [class]="industry.value" 
     type="checkbox" 
     [checked]="form.value[industry.value][i]['status']" 
     formControlName="status" > 

DEMO：ngOnInitでhttp://plnkr.co/edit/HI3h5nkbRwaQ9fj2jihZ?p=preview