Angular2 - NgFor

Question

を使用した場合、各keyUpイベントの後にぼかし双方向バインドされたテキスト入力だからAngular2アプリで私が「recipe.ingredients」という文字列配列を持っている、と私はあなたが食材を編集することができるように設定フォームを持っていますテキストフィールド（および配列内のアイテム）を追加および削除するためのボタンがあります。

<ul class="list-unstyled"> 
     <div class="row" *ngFor="let ingredient of recipe.ingredients; let i=index"> 
     <li> 
      <div class="col-xs-4"> 
      <input 
       size="20" 
       type="text" 
       class="form-control" 
       [ngModel]="recipe.ingredients[i]" 
       #t 
       (blur)="recipe.ingredients[i]=t.value" 
       required> 
      </div> 
      <div class="btn-group col-xs-2" role="group"> 
      <button 
       type="button" 
       class="btn btn-default btn-xs" 
       (click)="recipe.ingredients.splice(i,1)">-</button> 
      <button 
       type="button" 
       class="btn btn-default btn-xs" 
       (click)="recipe.ingredients.splice(i+1,0,'')">+</button> 
      </div> 
     </li> 
     </div> 
    </ul> 

あなたは[I] [（ngModel）]を、私はrecipe.ingredientsに結合する2つの道を行っていないことに気づくでしょう、と私はあなたが文字を入力したことと、毎回、テキストを試してみましたので、それはですボックスにフォーカスが失われます。私はそれが何かを持っていると仮定します* ngForアレイをステップ実行します。とにかく、この回避策は間違いありませんでしたが、今はいくつかの機能を追加しています。作業には2通りのデータバインディングが必要です。どのように私はこれを働かせるためにこれをリファクタリングできますか？

Answer 1

使用trackBy：ギュンターへ

<div class="row" *ngFor="let ingredient of recipe.ingredients; let i=index; 
trackBy:customTrackBy"> 

[(ngModel)]="recipe.ingredients[i]" 

customTrackBy(index: number, obj: any): any { 
    return index; 
} 

クレジット：https://stackoverflow.com/a/36470355/215945、これを見つけることができるSO検索：https://stackoverflow.com/search?q=%5Bangular2%5D+ngfor+ngmodel

---

https://stackoverflow.com/a/33365992/215945に示すように問題を解決する別の方法は、プリミティブの配列ではなくオブジェクトの配列を使用することです。だから、代わりに

recipe = { ingredients: ['salt', 'flour'] }; 

使用

recipe = { ingredients: [{item: 'salt'}, {item: 'flour'}] };