angular2 - チェックボックス付きFormArray

Question

私はアイテムの動的なサイズを持っています。すべてのアイテムについて、チェックボックスを生成したい。 私はそのための最良のアプローチはFormArrayを使うことだと思いました。

しかし、ダイナミックチェックボックスのラベルを指定するための追加プロパティは設定できません。私たちはここを参照してくださいとして

items: Array<string> = ['Banana', 'Apple', 'Beer', 'Water']; 

let checkboxArray = new FormArray([]); 

this.items.forEach(item => { 
    let formControl = new FormControl(true); 
    checkboxArray.push(formControl); 
}) 

はしかし、私はformControlのチェックボックスの値をspecifiyだけことができますが、ラベルに関する追加の情報を設定することはできません。

作業plunkrはここにある：http://plnkr.co/edit/ODe5QSOEvQsQiuBzs56o?p=preview

Answer 1

使用通常FormGroup。

form: FormGroup; 
items: string[] = ['Banana', 'Apple', 'Beer', 'Water']; 

this.form = new FormGroup({ 
    checkboxes: new FormGroup({ }), 
}); 

this.items.forEach(item => { 
    this.form.controls['checkboxes'].addControl(item, new FormControl(true)); 
}); 

FormArrayではなくループitemsです。

<form [formGroup]="form.controls['checkboxes']"> 
    <div *ngFor="let item of items"> 
     <input type="checkbox" [formControlName]="item"> 
     <span>{{ item }}</span> 
    </div> 
</form> 

Plnkr：http://plnkr.co/edit/qHjpejOhSfw25YHhJNqV?p=preview

Answer 2

これはformArrayを使用して動的チェックボックスを作成し、チェックボックスの選択に基づいてformArrayを更新するための別の方法です。この各動的リストのための余分な選択性を有している

component.html完璧ああ

<div *ngFor="let item of formArray.controls;" [formGroup]="item"> 
    <mat-checkbox [formControl]="item.get('selected')"> 
      {{item.get("name")?.value}} 
    </mat-checkbox> 
</div> 

component.ts

"items": [ 
{ 
    "name": "Banana", 
    "selected": true 
}, 
{ 
    "name": "Apple", 
    "selected": false 
}]