Angular中JSON数组按ID替换对象时ExistingHistory.id未定义报错

Array.filter()的返回值是所有匹配元素组成的新数组，哪怕只匹配到1条同ID数据，得到的也是长度为1的数组，而非单个历史记录对象。数组本身不存在id属性，因此访问this.ExistingHistory.id时得到undefined，传入删除逻辑后就触发了「读取undefined属性」的异常。

额外注意：你贴出的后端接口返回结构是带history字段的嵌套对象，并非直接返回History[]数组，原代码里直接把response标注为History[]存在类型错误，实际运行时response是普通对象，直接调用filter/find也会抛错，需要先读取response.history拿到实际的数组数据。

• 替换匹配已存在记录的方法：用Array.find()替代filter()，直接返回匹配到的单个对象（未匹配到时返回undefined），不需要额外操作数组下标。
• 抽离重复的新增、列表刷新逻辑，减少冗余代码。
• 修正异步时序问题：原逻辑调用删除方法后没有等待删除完成就直接发新增请求，可能出现数据重复、操作顺序错乱的问题，建议等删除成功回调触发后再执行新增；如果后端提供PUT更新接口，优先直接更新对应ID的条目，比「先删再加」更稳定，不会出现删除成功但新增失败导致的数据丢失。

修复后的完整代码参考：

onAddHistory(history: History) {
  // 补充操作时间
  history.date = new Date();
  console.log(history.SNS);

  this.historyService.getHistory().subscribe({
    next: (res) => {
      // 兼容两种返回结构，先取嵌套的history数组，不存在则直接用res
      const historyList: History[] = res.history ?? res;
      // 查找同ID的已存在记录
      const existingItem = historyList.find(item => item.id === history.id);

      // 抽离公共回调，避免重复编码
      const refreshHistoryList = () => {
        console.log("操作成功");
        this.Histories$ = this.historyService.getHistory();
      };
      const handleError = () => console.log("操作失败");

      if (existingItem) {
        // 存在同ID记录：优先走更新接口，无更新接口再走删后重加逻辑
        this.onDeleteHistory(existingItem.id);
        this.historyService.addHistory(history).subscribe({
          next: refreshHistoryList,
          error: handleError
        });
      } else {
        // 无同ID记录，直接新增
        this.historyService.addHistory(history).subscribe({
          next: refreshHistoryList,
          error: handleError
        });
      }
    },
    error: () => console.log("获取历史记录失败")
  });
}

• 如果onDeleteHistory本身是异步请求（调用了后端删除接口），需要把新增逻辑放到删除请求的next回调里，确保删除完成后再执行新增，彻底避免时序问题。
• 订阅接口时建议使用observer对象写法（即传入{next: ..., error: ...}的形式），比传多个回调函数的可读性更好，也方便后续补全complete逻辑。
• 不要给接口返回值写错误的类型标注，避免TS类型校验失效埋下隐患。

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