角度2 - trackBy関数、実際に何をしていますか？

Question

私は*ngForのパフォーマンスを最適化しようとしているときにのみtrackBy関数が使用されているという印象を受けました。何か変更があった場合、DOMを再構築する必要はありません。

しかし、最近、私はtrackByが実際に間違った動作を修正したという状況に遭遇しました。

例えばこれを持っ：最初*ngForにtrackBy:customTrackBy：私は明示的にこの部分を定義する必要がありました

<div> 
    <h2>Hobbies</h2> 
    <div *ngFor="let h of user.hobbies; trackBy:customTrackBy; let i = index"> 
    #{{i}} - {{h | json}}<br /> 

    <input [(ngModel)]="h.name" name="hobby_name_{{i}}" /> <br /><br /> 

    <select [(ngModel)]="h.type_id" name="type_{{i}}"> 
     <option *ngFor="let t of types" [value]="t.id">{{t.type}}</option> 
    </select> 

    <br /> 
    <br /> 
    <button class="btn btn-warn" (click)="remove(i)">Remove</button> 
    <br /><br /> 
    </div> 
</div> 

：趣味セクション、特にHTMLのhttps://plnkr.co/edit/nRgdwoiKAMpsbmWaoMoj?p=preview フォーカス。 trackByが除去され、次の手順を実行している場合：

1. することは、この場合、新しいアイテム

を追加し、最初の項目の入力が内容に置き換えます

最初の項目を削除します（両方のフィールドの内容が同じです）、モデルの値は正しいです。

trackByがこの問題を解決しますが、なぜですか？

私は本当にどんな種類の説明にも感謝します。このような質問をするのが適切でない場合は、正しいものにリダイレクトしてください。ありがとう。

更新

はここで間違った行動の例です：https://plnkr.co/edit/u8YajKfHcPiVqY0WcJt7?p=preview（BFが得る最初のアイテム（サイクリング）を削除し、新しい項目を追加（ボタンを追加）し、両方の値が同じデフォルト値を取得する方法を見ますモデルが正しいままであっても「デフォルト値」に置き換えられます）。

Answer 1

*ngForデフォルトでは、オブジェクトアイデンティティ別にアイテムを追跡します。

あなたは文字列の配列のようなプリミティブな値を持っている、と

<div *ngFor="let item of items; let i=index"> 
    <input [(ngModel)]="item" name="item{{i}}"> 
</div> 

でそれらを使用して、一つの項目を編集する場合、編集された項目のIDが変更されたため、その後*ngForは、トラブルになります。

ngForTrackByとすると、*ngForにインデックスで項目をトラッキングするように指示すると、フィールドを編集するときに上記のコードが正常に機能します。

もう1つの使用例は、*ngForにオブジェクトアイデンティティではなくカスタムオブジェクトIDプロパティでアイテムを追跡させたい場合です。