小编Bru*_*ein的帖子

我刚刚开始使用Angular 4,我需要开发一个CRUD网格,用户可以在其中添加,编辑或删除行.

在我的研究过程中,我发现这篇文章展示了如何创建网格以及动作:带有CRUD操作的Angular 4 Grid.

看看他的代码,引起我注意的是他使用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; …