angular - *ngFor 中的输入 ngModel 绑定到所有输入的相同值

Question

<tbody>
    <tr *ngFor="let trxList of trxNumberList; let i= index">
        <td>{{i}}</td>
        <td>
            <input type="text" name="trxNumber-{{i}}" class="form-control" minlength="1" maxlength="20" [(ngModel)]="trxList.trxNumber" />
        </td>
    </tr>
</tbody>

这是我的表格主体，当我输入第一个输入框时，所有其他输入都绑定到这个值。附图片。请帮忙。

编辑：

组件代码：

trxNumberObj = new Transaction;

ngOnInit() { 
  for(var i= 0 ; i <= 10; i++ ){ 
    this.trxNumberObj.count = i; 
    this.trxNumberList.push(this.trxNumberObj); 
  } 
}

Answer 1

使用以下

<input type="text" name="trxNumber-{{i}}" class="form-control" minlength="1" maxlength="20" [(ngModel)]="trxNumberList[index].trxNumber" />

这应该可以解决问题。如果没有，请告诉我

Answer 2

从您的评论中挑选出以下代码：

trxNumberObj = new Transaction;

ngOnInit() { 
  for(var i= 0 ; i <= 10; i++ ){ 
    this.trxNumberObj.count = i; 
    this.trxNumberList.push(this.trxNumberObj); 
  } 
}

模板中的这种行为是因为对象在 JS 中是可变的。所以你现在所做的是将同一个对象推送到数组中，这意味着数组中的所有对象都引用了同一个对象。您需要做的是在数组中推送新对象：

ngOnInit() { 
  for(var i= 0 ; i <= 10; i++ ){ 
    this.trxNumberList.push({count:i++});  // push new object every time!
  }
}

您似乎有一个对象模型，因此请在上面的代码中相应地进行调整。