如何获取AngularFire Observable的冻结副本并实现临时修改回滚？

嘿，我完全get你想要实现的需求——从AngularFire Database获取数据后，生成两个独立的静态副本，一个用来给用户修改（不实时同步到数据库），另一个作为原始备份，用户取消修改时能快速恢复到初始状态。咱们来一步步搞定这个问题：

核心问题：避免引用传递 #

你原来的代码里直接把res赋值给this.model和this.model2，但因为JavaScript对象是引用类型，这两个变量其实指向同一个内存地址的对象——修改其中一个，另一个也会跟着变，根本达不到“静态副本”的效果。所以第一步要做的是深拷贝，创建两个完全独立的对象实例。

实现步骤 #

1. 获取数据并创建深拷贝副本
   如果你用的是新版AngularFire（7.x+），推荐用valueChanges()来获取数据，结合first()只取一次初始值：

   this.afoDatabase.object(`usuarios/${this.userKey}/pacientes/${this.pacienteKey}`)
     .valueChanges()
     .pipe(first())
     .subscribe(res => {
       // 用JSON序列化/反序列化实现深拷贝（适合无特殊类型的对象）
       this.editableModel = JSON.parse(JSON.stringify(res));
       // 原始备份副本
       this.originalModel = JSON.parse(JSON.stringify(res));
     });
   

   👉 说明：如果你的数据里包含Date、函数或者特殊JS对象，JSON.parse(JSON.stringify())会丢失这些类型，这时可以用lodash的_.cloneDeep()方法，或者自己实现递归深拷贝函数。

2. 在模板中绑定可修改的副本
   把表单控件绑定到editableModel，让用户可以自由修改：

   <div class="edit-form">
     <label>Nome:</label>
     <input [(ngModel)]="editableModel.nome" />
     
     <label>Idade:</label>
     <input [(ngModel)]="editableModel.idade" type="number" />
     
     <!-- 其他需要修改的字段 -->
   </div>
   

3. 取消修改时恢复原始副本
   给取消按钮绑定方法，把原始备份深拷贝后赋值回可修改副本，确保备份不会被意外修改：

   onCancelEdit() {
     // 再次深拷贝，避免后续修改影响原始备份
     this.editableModel = JSON.parse(JSON.stringify(this.originalModel));
   }
   

额外提示 #

• 如果只需要浅拷贝（数据只有一层，没有嵌套对象/数组），可以用Object.assign({}, res)或者扩展运算符{...res}，但深拷贝更稳妥，适合绝大多数场景。
• 如果需要实时监听数据库变化并更新原始备份，可以去掉first()操作符，但要注意每次数据库更新时都要重新生成两个副本。

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