FormArrayのオブジェクトプロパティにアクセスし、値をAngular 4で更新します。

Question

オブジェクトプロパティにアクセスし、フォームから値をバインドします。これまで私はさまざまな選択肢を試みたが成功しなかった。

FormGroup：：これは私がこれまでのところ、私は以下のコードを単純化してきたものである

this.form = this.fb.group({ 
    ingredients: new FormArray([this.fb.group({name: 'Pasta', price: ''})]) 
}) 

ビューコード：コードは、上記のこの質問の目的のために簡略化されて

<div formArrayName="ingredients"> 
    <ion-item *ngFor="let ingredient of form['controls'].ingredients['controls']; let i = index" padding-bottom> 
    <div [formGroupName]="i"> 
     <ion-input formControlName="price" type="number"></ion-input> 
    </div> 
    </ion-item> 
</div> 

、シナリオは異なっていますが、最終的にこのようになります。ここで、オブジェクト内の価格の値を更新したいと考えています。私は私の研究をしている間、私はそれを行うための多くの方法を見たことが何も私のために動作するようです。

<form [formGroup]="form"> 
    <div formArrayName="ingredients"> 
    <div *ngFor="let ingredient of form['controls'].ingredients['controls']; let i = index" [formGroupName]="i"> 
    <input formControlName="price" type="number"/> 
    </div> 
    </div> 
    </form> 

とTS： - - ：

Answer 1

はこのお試しください

form: FormGroup; 

    constructor(builder: FormBuilder) { 
    this.form = builder.group({ 
     ingredients: new FormArray([ 
     builder.group({ 
      name: 'Pasta', 
      price: '', 
     }) 
     ]); 
    }) 
    } 

を解決するために、このplunkerを確認してください。 http://plnkr.co/edit/it3VW8wvYfYmk2Ox6M60?p=preview