PrimeNG V15表格单元格编辑模式：如何通过按钮退出？

PrimeNG的表格单元格编辑完全支持通过点击按钮退出编辑模式，可以借助Table组件提供的官方API实现，具体步骤如下：

1. 获取表格实例
   在组件类中通过@ViewChild获取表格实例，方便后续调用编辑控制方法：

   import { Component, ViewChild } from '@angular/core';
   import { Table } from 'primeng/table';
   
   @Component({
     // 组件元数据（如selector、templateUrl等）
   })
   export class YourComponent {
     @ViewChild('editTable') editTable: Table;
     products: any[]; // 你的数据集合
     // 其他业务方法
   }
   

   同时在模板中给<p-table>添加模板引用变量：

   <p-table #editTable [value]="products" dataKey="name" 
            (onEditInit)="onEditInit($event)" 
            (onEditComplete)="onEditComplete($event)" 
            (onEditCancel)="onEditCancel($event)">
     <!-- 表格列定义 -->
   </p-table>
   

2. 在可编辑单元格中添加操作按钮
   在可编辑单元格的编辑模板里，添加“完成”和“取消”按钮，点击时调用表格对应的API：

   • 点击“完成”：调用editTable.saveEditableCell()，会触发onEditComplete事件，效果和按Enter键一致
   • 点击“取消”：调用editTable.cancelEditableCell()，会触发onEditCancel事件，效果和按Esc键一致

   示例单元格代码：

   <tr *ngFor="let product of products">
     <td [pEditableColumn]="product.name" 
         [pEditableColumnField]="product.comment" 
         [pEditableColumnRowIndex]="product.id">
       <!-- 编辑状态下的模板 -->
       <ng-template pEditableColumnTemplate let-product>
         <input type="text" [(ngModel)]="product.comment" class="p-inputtext" />
         <button type="button" pButton label="完成" class="p-button-success p-mr-2" 
                 (click)="editTable.saveEditableCell()"></button>
         <button type="button" pButton label="取消" class="p-button-secondary" 
                 (click)="editTable.cancelEditableCell()"></button>
       </ng-template>
       <!-- 非编辑状态显示内容 -->
       {{ product.comment }}
     </td>
     <!-- 其他列 -->
   </tr>
   

3. 效果验证
   点击单元格进入编辑模式后，点击“完成”按钮会保存修改并退出编辑；点击“取消”按钮会放弃修改并退出编辑，和键盘操作的行为完全同步。

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