angular - ngModel 在 Angular 表单中的意外行为

Question

以下代码将生成两个inputs具有相同值bye（而不是helloand bye）。如果有人可以（理论上）解释这种行为并说出确切的原因，那就太好了。

<form>
  <div *ngFor="let item of ['hello', 'bye'];">
    <input name="name" [(ngModel)]="item">
  </div>
</form>

编辑：为了更好地解释我的问题：

原因不可能是因为它们绑定到同一个对象，它们将具有相同的值。如果是这样，则以下情况对于两个输入将具有相同的值，显然情况并非如此。

app.component.html

<form>
  <div *ngFor="let item of arr;">
    <input name="name" [(ngModel)]="item">
  </div>
</form>

app.component.ts

  arr = [1,4]

  ngOnInit(){
    setTimeout(()=>{
      this.arr[1] = 5;
    });
  }

请注意：我想我已经正确解释了我的问题，以及为什么我认为@DeborahK 的解决方案似乎不适合我。我正在寻找这种行为的原因。而不是解决方法。另外，我知道更改name每个输入会使其正常工作。所以请停止建议。

标签： angularangular-ngmodel

Answer 1

名称属性应该是唯一的

 <form>
      <div *ngFor="let item of ['hello', 'bye'];let i =index">
        <input  name="{{i}}" [(ngModel)]="item">
      </div>
    </form>