Angular2: вложенный *ngFor + md-select

Question

Я работаю над небольшим проектом в Angular2 (я новичок).

По сути, он включает в себя массив и до трех форм Material Angular Select для выбора значений из него.

Вот плункер: https://plnkr.co/edit/700zL1tDxml0zQwF6yj6?p=preview

Код JS

this.udlsCarac={ "Ticker1": { "NAME": "Name 1" }, "Ticker2": { "NAME": "Name 2" }, "Ticker3": { "NAME": "Name 3" } };
this.udlsTickers = Object.keys(this.udlsCarac);
this.udls=[];
this.udls.push(this.udlsTickers[0]);
this.nbUdls=1;
this.nbUdlsMax=3;

addUdlSelector(){
  this.udls.push(this.udlsTickers[0]);
  this.nbUdls+=1;
}
removeUdlSelector(){
  this.udls.pop();
  this.nbUdls-=1;
}

HTML код

<div *ngFor="let u of udls; let i=index">
  <md-select [(ngModel)]="udls[i]" name="choice">
    <md-option *ngFor="let udl of udlsTickers" [value]="udl">
      {{udlsCarac[udl].NAME}}
    </md-option>
  </md-select>
</div>

Как повторить проблему
1 - Выберите Имя 2 или Имя 3 при первом выборе
2 - Нажмите кнопку "+", чтобы добавить новый выбор
3 - видно, что массив выбранных значений (this.udls) правильно, но значение 1st Select переключилось на Name 1

Не могли бы вы помочь мне? большое спасибо!

Answer 1

Когда используешь name в формах каждое имя должно быть уникальным, иначе одно и то же значение будет применено ко всем. В вашей итерации все заканчиваются тем же именем, т.е. name="choice" Так что сделайте выбор уникальным, добавив свой индекс.

name="choice{{i}}"

и будет работать как хочешь:)

Ваш обновленный Plunker