角度2 ng指数+ 2で値を正しく変更しないでください

Question

私は角度のある形をしています。フォームは複数の選択肢を持つngForから構成されます。

<div *ngFor="let item of items; let i = index"> 
    <select name="" id="" [(ngModel)]="items[i]"> 
    <option *ngFor="let option of options" [value]="option.value">{{option.display}}</option> 
    </select> 
</div> 

そして、この例のデータ：

options = Array(10).fill(1).map((option,index) => { 
    return { 
     display:'thing' + index, 
     value: index 
    }; 
    }); 
    items = [2,7,2,7,2,7,2,7]; 

奇妙なことは、私が変更されたときに第二は、同じ変更が反映されます第四の選択を選択することです。ただし、このモデルにはこの変更が反映されません。

なぜなら、ビューは入力2のインデックスを一致させた後にそれを変更するからです。見知らぬ人でさえ、これは最初に起こるだけで、あなたがどのように期待するか振る舞います。これを引き起こしているだろうか http://plnkr.co/edit/q1YnoPBFdBKm0JDMVk7Q?p=preview

：

ここで問題を参照するにはplunkerですか？この問題を解決するにはどうすればよいですか？

Answer 1

@yurzuiが正しい回答を得ました。trackByは、不要な突然変異を防止します。ここでtrackByとのコードは次のとおりです。

<div *ngFor="let item of items; let i = index; trackBy: trackByFn"> 
    <select name="" id="" [(ngModel)]="items[i]"> 
    <option *ngFor="let option of options" [value]="option.value">{{option.display}}</option> 
    </select> 
</div> 

trackByがこれを解決する上で、私のエラーの一つであった機能を、取ることが重要です：

trackByFn(i: number) { 
    return i; 
    } 

@yurzuiにより、例えば、プロバイダの作業：

https://plnkr.co/edit/TAbQFqa3NeBvQ3FpKYCP?p=preview