*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>

这是我的 table 正文，当我在第一个输入框中键入时，所有其他输入都绑定到这个值。附上图片。请帮忙。

编辑：

组件代码：

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" />

这应该可以做到 trick.Let 我知道如果它没有

Answer 2

摘自您的评论，以下代码：

trxNumberObj = new Transaction;

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

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

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

你似乎有一个对象模型，所以在上面的代码中相应地调整它。

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

Input ngModel in *ngFor binds to same value for all inputs

angular

angular2-forms

angular4-forms