ngx-datatable取消编辑行恢复数据时获取空值求助

看起来你在实现ngx-datatable的行编辑取消功能时踩了个小坑，我来帮你捋捋问题出在哪，以及怎么修复。

问题根源分析 #

从你贴的代码来看，主要有两个核心问题导致取消后数据异常：

1. localStorage数据处理方式错误：你用this.rows.push(JSON.parse(localStorage.getItem("data")))的方式，如果localStorage里存的是数组，push会把整个数组当作单个元素塞进rows，导致rows变成[[原始数据]]的二维结构，表格根本没法正确渲染。
2. 数组重置逻辑不合理：this.rows = [...[]];清空数组后再push，完全没必要，反而容易搞乱数据结构。

修复步骤 #

第一步：确保原始数据正确存入localStorage #

首先要确认你在初始化或保存数据时，已经把完整的原始数组转成JSON字符串存入localStorage，比如在组件初始化时：

ngOnInit() {
  // 假设this.rows是你初始加载的数据源
  localStorage.setItem("data", JSON.stringify(this.rows));
}

第二步：修正cancel方法的逻辑 #

修改取消按钮的处理函数，直接替换当前编辑行的原始数据，比整个替换数组更高效也更稳妥：

cancel(row, rowIndex) {
  // 关闭当前行的编辑状态
  this.isEditable[rowIndex] = false;

  // 从localStorage获取原始数据
  const originalData = JSON.parse(localStorage.getItem("data"));
  
  // 先校验数据有效性
  if (!originalData || !Array.isArray(originalData)) {
    console.error("localStorage中未找到有效原始数据");
    return;
  }

  // 深拷贝对应行的原始数据，避免修改存储的原始数据引用
  this.rows[rowIndex] = JSON.parse(JSON.stringify(originalData[rowIndex]));
  
  // 触发Angular变更检测，更新表格视图
  this.rows = [...this.rows];

  console.log("Row canceled: " + rowIndex);
}

额外排查点 #

• 打开浏览器控制台，执行localStorage.getItem("data")，看看返回的是不是有效的JSON数组。如果是null或者格式错误，说明你存储数据时没正确执行JSON.stringify，或者存储时机不对。
• 如果你的行数据有嵌套对象（比如代码里注释的nota数组），一定要用深拷贝（比如JSON.parse(JSON.stringify(...))或者lodash的cloneDeep），不然会不小心修改到存储的原始数据。

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