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 - Select 姓名 2 或姓名 3 在 1 日 Select
2 - 单击“+”按钮添加新的 Select
3 - 您可以看到所选值数组 (this.udls) 是正确的，但第一个 Select 的值已切换为 Name 1

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

Answer 1

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

name="choice{{i}}"

它会如你所愿:)

Angular2：嵌套 *ngFor + md-select

Angular2 : nested *ngFor + md-select

javascript

angular

ngfor

md-select

你的更新Plunker