angular - 如何使用 Angular 表单创建可编辑的 primeNG 表？

Question

我正在尝试创建具有 Angular 形式的 PrimeNg 可编辑表格。

app.component.ts(这是最小的可重现代码)

export class AppComponent implements OnInit {
    epForm: FormGroup;
    range: FormArray;

    constructor(private fb: FormBuilder,){
    }
    ngOnInit() {
        this.epForm = new FormGroup({});
        this.epForm.addControl('range', new FormArray([]));
        this.range = <FormArray>this.epForm.get('range');
        this.range.push(
        this.fb.group({
            type: ['X1 Gene']
        })
        );
    }
}

html文件是

<form [formGroup]="epForm" novalidate>
    <p-table [value]="epForm.controls.range.value" [rows]="10" [responsive]="true">
        <ng-template pTemplate="header">
            <tr> Range </tr>
        </ng-template>
        <ng-template pTemplate="body" let-i="rowIndex">            
            <tr [formGroupName]='i'>
                <td >
                    <input type="text" pInputText formControlName="type" />
                 </td>
             </tr>
        </ng-template>
      </p-table>
</form>

我尝试使用上面的代码显示内容，但我无法编辑输入标签。我打开检查元素并检查了它，只有 tbody正在更新中。

我删除了 [formgroup]='i'我在控制台中检查了它，我得到了以下错误

 Cannot find control with path: 'range -> type'

我用 <table> 尝试过同样的事情它工作正常。但是对于 p-table 我得到了这种行为？我该如何解决这个问题。

StackBlitz

就像下面的图片一样，我正在使用 [formGroupName] 进入检查元素。

Answer 1

我从 primeNg documentation 得到了我自己问题的答案

Performance Tips

When selection is enabled use dataKey to avoid deep checking when comparing objects.

Use rowTrackBy to avoid unnecessary dom operations.

Prefer lazy loading for large datasets.

所以我修改了我的表格

<p-table [value]="epForm.controls.range.value" [rows]="10" [responsive]="true"
[rowTrackBy]="trackByFn">

在组件文件中我添加了下面的方法

trackByFn(index, row) {
    return index;
}