angular - ngFor无法与ngModel一起正常使用( Angular 5.1.2)

我看到ngFor与ngModel结合使用时发生奇怪的行为。这是一个例子:

heroes = [
   {
      "name": "Deadpool"
   },
   {
      "name": "Thor"
   },
   {
      "name": "Superman"
   },
   {
      "name": "Batman"
   }
];

使用以下代码:

<div *ngFor="let hero of heroes;">
  <div class="row">
    <div class="input">
      <label>Superhero</label>
      <input [(ngModel)]="hero.name" name="hero">
    </div>
  </div>
</div>

结果:

super 英雄: bat 侠
super 英雄: bat 侠
super 英雄: bat 侠
super 英雄: bat 侠

而如果我不使用ngModel，而只是打印该值，则它可以正常工作:

<div *ngFor="let hero of heroes;">
  <div class="row">
    <div class="input">
      <label>Superhero</label>
      <span>{{hero.name}}</span>
    </div>
  </div>
</div>

结果:

super 英雄:死侍
super 英雄:雷神
super 英雄:超人
super 英雄: bat 侠

谁能告诉我我在做什么错？

最佳答案

唯一的问题是输入相同的input name:

将name="hero"更改为name="hero{{i}}"

<div *ngFor="let hero of heroes;let i = index;">
  <input [(ngModel)]="hero.name" name="hero{{i}}">
</div>

关于angular - ngFor无法与ngModel一起正常使用( Angular 5.1.2)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48582203/