2

我正在 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 - 在第 1 次选择
2 上选择名称 2 或名称 3 - 单击“+”按钮添加新的选择
3 - 您可以看到所选值的数组 ( this.udls) 是正确的，但第 1 次选择的值有切换到Name 1

你能给我一些帮助吗？多谢 ！

4

1 回答 1

1

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

name="choice{{i}}"

它会按你的意愿工作:)

您更新的Plunker

于 2017-01-21T13:48:41.577 回答