如何在Primeng中不使用pSaveEditableRow编程将表格行输入值转为文本格式

问题原因 #

你遇到的delete this.clonedCars[user.code]无效，大概率是两个核心原因：

1. 键值不匹配：新添加的行可能还未生成有效code值，导致无法定位clonedCars中的对应条目
2. 变更检测未触发：直接删除对象属性后，Angular未检测到数据变化，表格视图未同步更新

修复步骤 #

1. 确保新行有唯一标识
   在添加新行时，给新增对象生成临时唯一键（比如时间戳），避免因code为空或重复导致匹配失败：

addNewRow() {
  const newUser = {
    code: 'temp_' + Date.now(), // 生成临时唯一标识
    name: '',
    age: null,
    // 其他业务字段...
  };
  this.cars.push(newUser);
  this.clonedCars[newUser.code] = { ...newUser }; // 将新行存入克隆对象池
}

2. 自定义保存函数的正确实现
   在最后一列输入框的失焦或回车事件中调用保存函数，删除克隆对象后手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

// 构造函数注入变更检测服务
constructor(private cdr: ChangeDetectorRef) {}

saveRow(user: any) {
  // 同步克隆对象的编辑值到原数据（按需保留）
  Object.assign(user, this.clonedCars[user.code]);
  // 删除对应克隆对象，退出编辑状态
  delete this.clonedCars[user.code];
  // 手动触发变更检测，强制视图更新
  this.cdr.detectChanges();
}

3. 模板中的事件绑定
   在最后一列的p-cell-editor输入框上绑定触发事件：

<p-cell-editor>
  <ng-template pTemplate="input">
    <input 
      type="text" 
      [(ngModel)]="clonedCars[user.code].lastColumn" 
      (blur)="saveRow(user)" 
      (keyup.enter)="saveRow(user)"
    />
  </ng-template>
  <ng-template pTemplate="output">
    {{ user.lastColumn }}
  </ng-template>
</p-cell-editor>

额外说明 #

• 若新行的code由后端生成，在完成后端保存后，记得将clonedCars中的临时键替换为真实code
• 始终保证clonedCars的键与表格行的唯一标识一一对应，避免出现键不匹配的情况

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