Angular 2 ngFor在索引+ 2處錯誤地更改了值

我有一個角度形式。該表單由一個ngFor和幾個選擇組成。Angular 2 ngFor在索引+ 2處錯誤地更改了值

<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索引。即使是陌生人，這隻會在第一次發生，然後它會表現出你的期望。

這裏的plunker，看問題： http://plnkr.co/edit/q1YnoPBFdBKm0JDMVk7Q?p=preview

什麼會導致此？我如何解決這個問題？

來源

2017-09-13 Niles Tanner

好問題。使用'trackBy'來解決它。 https://stackoverflow.com/questions/44476677/ngmodel-cannot-detect-array-changes-correctly這裏是你的例子http://plnkr.co/edit/TAbQFqa3NeBvQ3FpKYCP?p=preview – yurzui

@yurzui有正確的答案trackBy可以防止任何不必要的突變。下面是與trackBy代碼：

trackByFn(i: number) { 
    return i; 
    }

工作由@yurzui例如提供商：

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

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

來源

2017-09-13 16:00:06

Angular 2 ngFor在索引+ 2處錯誤地更改了值

回答

相關問題