モデル駆動型のアクセスアレイ

Question

モーダル駆動型では、いくつかのプロパティがあります。 1つのプロパティに配列が含まれています。

ngOnInit() { 
    this.reproOrderForm = this.formBuilder.group({ 
    ... 
    anyArray: this.formBuilder.array([ 
     this.formBuilder.group({ 
     anyValue: [] 
     }) 
    ]) 
    }); 
} 

私の質問です：私は、この定義されている私のcomponent.tsで

<form class="form-horizontal" [formGroup]="reproOrderForm"> 
... 
<div class="col-md-12" formArrayName="anyArray"> 
    <table class="table table-striped table-condensed"> 
    <tr> 
     <th>col1</th> 
     <th>col2</th> 
    </tr> 
    <tr *ngFor="let elem of reproOrderForm.controls.anyArray.controls;let i = index;" [formGroupName]="i"> 
     <td>{{i+1}}</td> 
     <td>{{elem.value.anyValue}}</td> 
    </tr> 
    </table> 
</div> 
... 
</form> 

：私は、テーブル内のこの配列を表示することが可能です私がやったよりも、この配列に簡単にアクセスします私のHTML？そうだとすれば - >どのように私はこれを達成するだろうか？

Answer 1

テンプレート簡潔には、あなたの唯一の関心事である場合は、例えば、独自のクラスプロパティにmyForm.controls.anyArray（あるいはmyForm.controls.anyArray.controls）を割り当てることができます。：

テンプレートで

export class MyComponent { 
    reproOrderForm: FormGroup; 
    formArray: FormArray; 

    ngOnInit() { 
    // Assign the array first 
    this.formArray = this.formBuilder.array([ 
     this.formBuilder.group({ 
     anyValue: [] 
     }) 
    ]); 
    // Then assign the form. 
    this.reproOrderForm = this.formBuilder.group({ 
     anyError: this.formArray 
    }); 
    } 
} 

そして：

<tr *ngFor="let elem of formArray.controls;let i = index;">...</tr>