Angular中展示编辑JSON数据后如何获取最终修改结果

核心逻辑很简单：拿不到最终变更数据，本质是编辑操作没有同步回写到当初用来渲染组件的源JSON对象上，打通绑定链路后，源对象本身存的就是实时最新值，不需要额外做复杂的DOM遍历取值。

具体实现步骤 #

• 给所有可编辑控件加双向数据绑定
  当前模板里的输入框、选择器等编辑元素只做了初始值渲染，没有做值的回写绑定，修改操作只停留在视图层，根本没同步到组件类的变量里。
  用模板驱动表单的话，直接给控件加对应数据路径的[(ngModel)]即可，比如单层级手风琴条目名称输入框：

  <input matInput [(ngModel)]="panelItem.name" placeholder="条目名称">
  

  如果是多层嵌套的手风琴结构，顺着JSON的嵌套层级写绑定路径就行，比如二级子项的属性绑定到panelItem.children[childIndex].prop，只要绑定路径和渲染手风琴用的数据源路径完全一致，所有输入修改都会实时写回源对象。
• 同步拖拽、增删操作的数据源变更
  如果给手风琴加了拖拽排序、条目增删功能，不要只更新视图渲染顺序，操作回调里要直接修改源JSON数组：

  // 拖拽排序回调示例
  onPanelDrop(event: CdkDragDrop<any[]>, targetList: any[]) {
    // targetList传对应层级的源数据数组，不要传拷贝值
    moveItemInArray(targetList, event.previousIndex, event.currentIndex);
  }
  

  新增、删除条目时也直接对源数据数组做push、splice操作，保持视图操作和源数据修改完全同步。
• 直接读取源数据变量获取最终JSON
  以上绑定做完后，需要获取最终结果时，直接读取组件类里用来渲染手风琴的那个源数据变量即可，所有编辑、排序、增删的变更都存在这个对象里，直接序列化或者传给接口都可以：

  // 示例：点击按钮获取最新JSON
  submitChangedData() {
    // 这里的accordionSource就是你初始化绑给手风琴组件的JSON变量
    const latestJson = structuredClone(this.accordionSource);
    console.log('最终变更后的JSON数据：', latestJson);
    // 后续提交接口、导出操作都用latestJson即可
  }
  

避坑提醒：不要在渲染手风琴的时候对源JSON做深拷贝生成新对象传给组件，否则视图修改的是拷贝对象，源数据不会同步更新。如果怕污染初始备份数据，可以初始化时做一次深拷贝生成专门的编辑态数据源，所有视图绑定都指向这个编辑态变量即可。

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