如何在PrimeNG表格中自动开启新表单控件的行编辑模式？

你遇到的问题在于调用initRowEdit时，表格还未完成新行的DOM渲染，导致方法无法定位到目标行。另外需要确保参数传递正确，以下是修正方案：

核心修正点 #

• 新行添加后，需等待Angular完成变更检测、更新DOM后，再调用initRowEdit
• initRowEdit的参数直接传递新创建的FormGroup实例即可（因为你的表格数据源是formArray.controls，每行对应一个FormGroup）

修正后的代码 #

import { ChangeDetectorRef } from '@angular/core';
import { Table } from 'primeng/table';

// 在组件构造函数中注入ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef) {}

public addNewElement(): void {
    const newFormGroup = new FormGroup({
      code: new FormControl(null),
      type: new FormControl(null),
    });
    this.formArray.insert(0, newFormGroup);
    
    // 触发变更检测，确保新行渲染到DOM
    this.cdr.detectChanges();
    
    // 调用initRowEdit开启编辑模式
    this.table.initRowEdit(newFormGroup);
}

备选方案（用setTimeout） #

如果不想依赖ChangeDetectorRef，也可以用setTimeout让浏览器在DOM更新后执行代码：

public addNewElement(): void {
    const newFormGroup = new FormGroup({
      code: new FormControl(null),
      type: new FormControl(null),
    });
    this.formArray.insert(0, newFormGroup);
    
    setTimeout(() => {
        this.table.initRowEdit(newFormGroup);
    }, 0);
}

额外检查项 #

1. 确保表格标签上已启用editableRow属性：

<p-table [value]="formArray.controls" [editableRow]="true" #table>
  <!-- 列配置示例 -->
  <ng-template pTemplate="body" let-rowData let-editing="editing" let-index="rowIndex">
    <tr [pEditableRow]="rowData">
      <td>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" formControlName="code" />
          </ng-template>
          <ng-template pTemplate="output">
            {{ rowData.get('code')?.value }}
          </ng-template>
        </p-cellEditor>
      </td>
      <!-- 其他列... -->
    </tr>
  </ng-template>
</p-table>

2. 确保表格的#table模板引用变量正确关联到组件中的table属性：

@ViewChild('table') table!: Table;

内容的提问来源于stack exchange，提问作者dmance