ngFor 无法与 ngModel 一起正常工作（角度 5.1.2）

Question

我看到 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>

结果：

超级英雄：蝙蝠侠
超级英雄：蝙蝠侠
超级英雄：蝙蝠侠
超级英雄：蝙蝠侠

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

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

结果：

超级英雄：死侍
超级英雄：雷神
超级英雄：超人
超级英雄：蝙蝠侠

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

Answer 1

这里唯一的问题是输入相同input name：

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

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