Angulaire 2 ngPour modifier incorrectement les valeurs à l'index + 2

Question

J'ai une forme en angulaire. Le formulaire se compose d'un ngFor avec plusieurs sélections.

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

Les données pour cet exemple:

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

La chose étrange est que lorsque je change la 2ème sélectionner la 4ème sélection reflète le même changement. Cependant, le modèle ne reflétera pas ce changement.

Quelle que soit la raison, la vue va changer l'index de l'entrée 2 après lui correspondre. Encore plus étrange, cela n'arrivera que la première fois, alors il se comportera comme vous l'attendez.

Voici le plunker pour voir le problème: http://plnkr.co/edit/q1YnoPBFdBKm0JDMVk7Q?p=preview

Que serait la cause? Comment puis-je résoudre ce problème?

Answer 1

@yurzui avait la bonne réponse trackBy empêche toute mutation inutile. Voici le code avec le 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> 

Il est important pour trackBy de prendre fonction, qui était l'une de mes erreurs dans la résolution de ce:

trackByFn(i: number) { 
    return i; 
    } 

fournisseur Exemple de travail par @yurzui:

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