- 首页
- 其他开发
- 推入数组时，ngFor 和 ngModel 重置输入
推入数组时，ngFor 和 ngModel 重置输入
[英] ngFor and ngModel resseting input when pushing into array
本文介绍了推入数组时，ngFor 和 ngModel 重置输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个表单，您可以在其中添加多行，然后再发送.为此，我将数据存储在 Lines 数组中，并使用 ngFor 和 ngModel 将数据绑定/检索到我的表单中.
这是我的代码的样子
导出类 MyComponent 实现 OnInit {行:行[] = [];构造函数(){}ngOnInit() {this.lines.push(new Line("XXXXXX1",0,0));}添加行(){让 line = (new Line("XXXXXX1",0,0));this.lines.push(line);}节省(){控制台日志(this.lines)；}}类行{类型:字符串；qteRejet : 数量；qteComm:数字；构造函数(类型:字符串 =XXXX1"，qteRej:数字 = 0，qteComm:数字 = 0){this.type = 类型；this.qteRejet = qteRej;this.qteComm = qteComm;}}
和形式:
<div class="row" *ngFor="let line of lines; let ind=index;"><div class="col-lg-1"><i class="fa fa-2x fa-plus-square add-btn" (click)="addLine()" *ngIf="lines[lines.length-1] === line"></我＞
<div class="col-lg-3"><select class="form-control" name="type" [(ngModel)]="lines[ind].type"><option>XXXXXX1</option><option>XXXXXX2</option><option>XXXXXX3</option></选择>
<div class="col-lg-4"><input class="form-control" type="number" min="0" name="qteCommande" [(ngModel)]="lines[ind].qteComm">
<div class="col-lg-4"><input class="form-control" type="number" min="0" name="qteRejet" [(ngModel)]="lines[ind].qteRejet">
当我一次添加所有行时，表单完美运行.现在，当我尝试填充一行然后添加另一行时，出于某种原因，表单会重置之前输入的行.
但是当我检查我的数组时，它仍然有输入的值
有人可以解释这里发生了什么/我做错了什么吗?任何帮助将不胜感激.
我尝试按照 @Ploppy 的建议使用 trackBy 并在我的行中添加了一个 id.我还在表单中添加了这一行:
{{line.id}} |{{line.type}} |{{line.qteComm}} |{{line.qteRejet}}</p>
这就是正在发生的事情:
表单已重置，但值已正确绑定.
解决方案
所以我终于在我的代码中找出了问题所在.我的输入在 form 中，添加一个新行添加了一个具有相同 name 的输入(这在 Agular 2 中是不允许的).用 name=attribute-{{id}} 替换我的 name 属性解决了问题.
<div class="row" *ngFor="let line of lines; let ind=index;"><div class="col-lg-1"><i class="fa fa-2x fa-plus-square add-btn" (click)="addLine()" *ngIf="lines[lines.length-1] === line"></我＞
<div class="col-lg-3"><select class="form-control" name="type-{{ind}}" [(ngModel)]="lines[ind].type"><option>XXXXXX1</option><option>XXXXXX2</option><option>XXXXXX3</option></选择>
<div class="col-lg-4"><input class="form-control" type="number" min="0" name="qteCommande-{{ind}}" [(ngModel)]="lines[ind].qteComm">
<div class="col-lg-4"><input class="form-control" type="number" min="0" name="qteRejet-{{ind}}" [(ngModel)]="lines[ind].qteRejet">
这是一个总结一切的Plunker:Plunker
I'm trying to create a form where you can add multiple lines before sending it. For that I'm using storing data in an array of Lines and use ngFor and ngModel to bind / retrieve data into my form.
Here is what my code looks like
export class MyComponent implements OnInit {
lines : Line[] = [];
constructor() { }
ngOnInit() {
this.lines.push(new Line("XXXXXX1",0,0));
}
addLine(){
let line = (new Line("XXXXXX1",0,0));
this.lines.push(line);
}
save(){
console.log(this.lines);
}
}
class Line {
type: string;
qteRejet : number;
qteComm : number;
constructor(type: string = "XXXX1", qteRej: number = 0, qteComm : number = 0){
this.type = type;
this.qteRejet = qteRej;
this.qteComm = qteComm;
}
}
and the form :
<div class="form-group">
<div class="row" *ngFor="let line of lines; let ind=index;">
<div class="col-lg-1">
<i class="fa fa-2x fa-plus-square add-btn" (click)="addLine()" *ngIf="lines[lines.length-1] === line"></i>
</div>
<div class="col-lg-3">
<select class="form-control" name="type" [(ngModel)]="lines[ind].type">
<option>XXXXXX1</option>
<option>XXXXXX2</option>
<option>XXXXXX3</option>
</select>
</div>
<div class="col-lg-4">
<input class="form-control" type="number" min="0" name="qteCommande" [(ngModel)]="lines[ind].qteComm">
</div>
<div class="col-lg-4">
<input class="form-control" type="number" min="0" name="qteRejet" [(ngModel)]="lines[ind].qteRejet">
</div>
</div>
</div>
When I add all the lines at once, the form works perfectly. Now when I try to fill a line then add another line, for some reason, the form resets the lines previously entered.
But when I check my array, it still has the entered values
Can someone explain what is going on here / what I am doing wrong ? Any help would be greatly appreciated.
EDIT : I tried, as suggested by @Ploppy to use trackBy and added an id to my lines. I also added this line to the form :
<p>{{line.id}} | {{line.type}} | {{line.qteComm}} | {{line.qteRejet}}</p>
And this is what's happening :
The form resets but the values are correctly binded.
解决方案
So I finally figured out the problem in my code. My inputs were inside a form, and adding a new line added an input with the same name(Which is not allowed in Agular 2). Replacing my name attributes by name=attribute-{{id}}solved the problem.
<div class="form-group">
<div class="row" *ngFor="let line of lines; let ind=index;">
<div class="col-lg-1">
<i class="fa fa-2x fa-plus-square add-btn" (click)="addLine()" *ngIf="lines[lines.length-1] === line"></i>
</div>
<div class="col-lg-3">
<select class="form-control" name="type-{{ind}}" [(ngModel)]="lines[ind].type">
<option>XXXXXX1</option>
<option>XXXXXX2</option>
<option>XXXXXX3</option>
</select>
</div>
<div class="col-lg-4">
<input class="form-control" type="number" min="0" name="qteCommande-{{ind}}" [(ngModel)]="lines[ind].qteComm">
</div>
<div class="col-lg-4">
<input class="form-control" type="number" min="0" name="qteRejet-{{ind}}" [(ngModel)]="lines[ind].qteRejet">
</div>
</div>
</div>
Here is a Plunker that summaries everything : Plunker
这篇关于推入数组时，ngFor 和 ngModel 重置输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
