Angular2：嵌套* ngFor + md-select

Question

我正在Angular2做一个小项目（我是初学者）。

基本上它涉及一个数组和最多三个Material Angular Select表单，用于从中选择值。

以下是plunker：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 - 在1st 1st上选择Name 2或Name 3
2 - 点击＆＃34; +＆＃34;按钮添加新的选择
3 - 您可以看到所选值的数组（this.udls）是正确的，但是1st Select的值已切换为Name 1

你能帮我个忙吗？非常感谢！

Answer 1

在表单中使用name时，每个名称都必须是唯一的，否则相同的值将应用于所有名称。在您的迭代中，所有都以相同的名称结束，即。 name="choice"因此，请通过添加索引来使选择唯一。

name="choice{{i}}"

它会按你的意愿工作：）

您更新的Plunker