我刚刚开始使用Angular 4,我需要开发一个CRUD网格,用户可以在其中添加,编辑或删除行。
在我的研究过程中,我发现这篇文章展示了如何创建网格以及操作:Angular 4 Grid with CRUD operations。
看看他的代码,引起我注意的是他使用ng-template在编辑/查看模式之间切换的方式。
<tr *ngFor="let emp of EMPLOYEES;let i=idx">
<ng-template [ngTemplateOutlet]="loadTemplate(emp)" [ngOutletContext]="{ $implicit: emp, idx: i }"></ng-template>
</tr>
在文章中,他使用模板驱动的表单来编辑行。但是,我试图改变为反应形式。
在我尝试这样做时,我试图将[(ngModel)]替换为formControlName,我遇到了一些错误。我的第一次尝试,我试图在表单元素的模板html开头添加[formGroup]。但是当我尝试运行并编辑该行时,我收到以下错误:
Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).
当我尝试在ng-template中移动[formGroup]时,它可以工作,但我无法将值绑定到字段,我必须在loadTemplate函数中设置值:
loadTemplate(emp: Employee) {
if (this.selemp && this.selemp.id === emp.id) {
this.rForm.setValue({
id: emp.id,
name: emp.name
});
return this.editTemplate;
} else {
return this.readOnlyTemplate;
}
}
这样可以在只读模式下显示字段内的值:(
这是迄今为止我所得到的Plunker。
如何使反应形式与ng-template一起使用以及如何设置值以编辑条目?
任何帮助表示赞赏!感谢
答案 0 :(得分:1)
实际上,您的表单不是只读的,您只是不断覆盖您输入的输入。由于您在模板中进行了方法调用(这通常不是一个好主意),因此只要发生更改就会调用loadTemplate
,这在其中意味着
this.rForm.setValue({
id: emp.id,
name: emp.name
});
每次尝试输入任何内容时,都会反复调用。我们可以通过在您单击编辑时设置表单值来克服此问题。在这里,我们还存储索引,以便我们可以使用它将修改后的值设置在数组中的正确位置,利用索引也许可以更智能地完成,但这是实现我们想要的快速解决方案。 p>
editEmployee(emp: Employee) {
this.index = this.EMPLOYEES.indexOf(emp)
this.selemp = emp;
this.rForm.setValue({
id: emp.id,
name: emp.name
});
}
所以当我们点击保存时,我们会使用该索引......
saveEmp(formValues) {
this.EMPLOYEES[this.index] = formValues;
this.selemp = null;
this.rForm.setValue({
id: '',
name: ''
});
}
你的掠夺者:https://plnkr.co/edit/6QyPmqsbUd6gzi2RhgPp?p=preview
我建议你重新考虑这个想法,在模板中使用方法loadTemplate
会导致这种方法过于激发。你可以在plunker中看到,我们在每次触发时都会记录日志fired!
,所以它很多!根据具体情况,这可能会导致严重的性能问题,因此请记住:)
PS。对代码进行了一些其他更改,以便添加新员工以正常工作(与问题无关)