Angular 2 ngFür das Ändern von Werten falsch bei Index + 2

Question

Ich habe ein Formular in eckigen. Das Formular besteht aus einem ngFor mit mehreren Selects.

<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> 

und die Daten für dieses Beispiel:

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

Das Merkwürdige ist, dass, wenn ich die 2. Änderung der 4. wählen Sie wählen die gleiche Änderung widerzuspiegeln. Das Modell wird diese Änderung jedoch nicht widerspiegeln.

Aus welchem ​​Grund auch immer die Ansicht wird die Eingabe 2 Indizes nach der Übereinstimmung ändern. Noch seltsamer wird dies nur beim ersten Mal passieren, dann wird es sich so verhalten, wie Sie es erwarten würden.

Hier ist das Plunker das Problem zu sehen: http://plnkr.co/edit/q1YnoPBFdBKm0JDMVk7Q?p=preview

Was verursacht werden würde? Wie behebe ich dieses Problem?

Answer 1

@yurzui hatte die richtige Antwort trackBy verhindert unnötige Mutationen. Hier ist der Code mit dem 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> 

Es ist wichtig für trackBy eine Funktion zu übernehmen, die bei der Lösung einer meiner Fehler war:

trackByFn(i: number) { 
    return i; 
    } 

Arbeitsbeispiel Anbieter von @yurzui:

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