Angular中P-Table行内编辑异常：点击单行触发全行列可编辑

问题原因 #

你的代码依赖模板自动提供的editing变量控制编辑状态，但该变量未与每一行的独立状态绑定，导致点击编辑按钮时所有行的编辑状态被同时触发；且未手动维护当前编辑行的引用，无法精确控制单一行的编辑模式。

解决方案 #

通过在组件中手动维护当前编辑行的引用，精确控制仅目标行进入编辑状态：

1. 在TS组件中添加状态变量

// 跟踪当前正在编辑的行
currentEditingRow: any = null;
// 保存原始数据用于取消编辑时恢复
originalProduct: any = null;

2. 修改HTML模板代码
   替换原有的编辑状态判断逻辑，用currentEditingRow控制按钮显示和行编辑状态：

<p-table [value]="userElement" dataKey="id" editMode="row" [tableStyle]="{'min-width': '50rem'}"
    styleClass="p-datatable-responsive-demo">
    <ng-template pTemplate="header">
        <tr class="grid">
            <th style="width:5%" l10nTranslate>UnderProcess.Actions</th>
            <th style="width:10%" l10nTranslate><p-sortIcon field="creationDate"></p-sortIcon>UnderProcess.CreateDate</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product let-ri="rowIndex">
        <tr [pEditableRow]="currentEditingRow === product">
            <td>
                <div class="flex align-items-center justify-content-center gap-2">
                    <button *ngIf="currentEditingRow !== product" pButton pRipple type="button" 
                            icon="pi pi-pencil" (click)="onRowEditInit(product)" 
                            class="p-button-rounded p-button-text"></button>
                    <button *ngIf="currentEditingRow === product" pButton pRipple type="button" 
                            icon="pi pi-check" (click)="onRowEditSave(product)" 
                            class="p-button-rounded p-button-text p-button-success mr-2"></button>
                    <button *ngIf="currentEditingRow === product" pButton pRipple type="button" 
                            icon="pi pi-times" (click)="onRowEditCancel(product, ri)" 
                            class="p-button-rounded p-button-text p-button-danger"></button>
                </div>
            </td>
            <td>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" class="col-input-grid-100" [(ngModel)]="product.createddate">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{product.createddate}}
                    </ng-template>
                </p-cellEditor>
            </td>
        </tr>
    </ng-template>
</p-table>

3. 更新TS组件中的编辑方法

onRowEditInit(product: any) {
    this.currentEditingRow = product;
    // 深拷贝原始数据，避免取消编辑时影响原数据
    this.originalProduct = JSON.parse(JSON.stringify(product));
}

onRowEditSave(product: any) {
    // 这里添加你的保存逻辑，比如调用API更新数据
    console.log('保存数据:', product);
    this.currentEditingRow = null;
}

onRowEditCancel(product: any, index: number) {
    // 恢复原始数据
    this.userElement[index] = this.originalProduct;
    this.currentEditingRow = null;
}

关键说明 #

• 移除了pInitEditableRow、pSaveEditableRow、pCancelEditableRow指令，改为手动通过currentEditingRow控制编辑状态，避免PrimeNG自动触发全局编辑状态。
• dataKey="id"确保PrimeNG能正确识别每一行的唯一性，这是行编辑功能正常工作的前提。
• 用深拷贝保存原始数据，确保取消编辑时能准确恢复该行的初始状态。

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