Angular2 ngFor

Question

の内部ngModel htmlファイルで、私はこれを書いたので、私は、私の入力から文字列の配列をバインドしようとしています：

<div *ngFor="let word of words; let in=index" class="col-sm-3"> 
     <div class="form-group"> 
     <input type="text" [(ngModel)]="words[in]" class="form-control" [attr.placeholder]="items[in]" required> 
     </div> 
    </div> 

しかし、予想通り、私がログインしたときので、これは動作しませんでしたwords変数は、Componentクラスで初期化された空の配列を表示します。また、私は別のコンポーネントから変数を記録して、それが私の問題の問題であるはずです。私は2つのコンポーネントを持っています：

• クエリコンポーネントの配列を含むフォームコンポーネントです。
• 単語の文字列を含むクエリ子コンポーネントです。だから、

、言葉変数は、クエリコンポーネントに宣言されているが、私はこのようなフォームコンポーネントを介して、この変数をログに記録しています：

console.log(JSON.stringify(this.queries)); 

問合せはフォームコンポーネントでクエリの配列ですが：

queries:Query[] = []; 

ありがとうございました！

Answer 1

問題は、プリミティブ値（words）の配列をngForに使用することです。

あなたが

words = [{value: 'word1'}, {value: 'word2'}, {value: 'word3'}]; 

のようにオブジェクトの配列に単語を変更してもtrackByを使用して解決できるかもしれません

<div *ngFor="let word of words; let in=index" class="col-sm-3"> 
     <div class="form-group"> 
     <input type="text" [(ngModel)]="words[in].value" class="form-control" [attr.placeholder]="items[in]" required> 
     </div> 
    </div> 

このようにそれを使用しますが、私はわからないことができます。

Answer 2

これを解決するには、@Input（）関数を使用し、クエリ配列とクエリインデックス番号を渡します。サポートに感謝します。

Answer 3

で説明したように各入力タグは、定義されたユニークな '名前' 属性を持つことがあります。

Angular2 ngModel inside ngFor (Data not binding on input)

ここで修正されたコードです：私に

<div *ngFor="let word of words; let in=index" class="col-sm-3"> 
    <div class="form-group"> 
    <input type="text" [(ngModel)]="words[in]" name="word{{in}}" class="form-control" [attr.placeholder]="items[in]" required> 
    </div>