Angular 2表单数据更新及取消时回滚数据的实现问题

嘿，我懂你遇到的问题了——重新发起GET请求确实不是解决这个问题的好办法，甚至可能因为Angular的变更检测或者对象引用的问题，看起来根本没生效。咱们换个更靠谱、更高效的思路：在组件初始化时就把从服务器拿到的原始数据存一份深拷贝，点击取消时直接把这份副本赋值回去，不用再折腾服务器。

为什么重新GET不行？ #

原因很简单：

• 当你第一次获取数据后，组件里绑定的contact对象和服务器返回的对象是引用关系，后续修改表单时其实是在修改这个引用指向的对象。就算你重新GET，服务器返回的新对象如果和之前的结构一致，Angular的变更检测可能会认为“没有变化”，视图就不会更新。
• 额外的网络请求不仅慢，还完全没必要——我们已经在本地拿到了原始数据，直接用本地副本就好。

解决方案步骤 #

1. 保存原始数据的深拷贝 #

在组件里新增一个变量，专门存储从服务器获取的原始数据副本。注意必须是深拷贝，不能直接赋值（因为对象是引用类型，直接赋值的话，修改表单数据会同时改掉副本）。

2. 取消时回滚到原始副本 #

点击取消按钮时，直接把原始副本赋值给表单绑定的对象，同时隐藏操作按钮。

完整代码示例 #

结合你提供的导入部分，完整的组件代码大概是这样：

import { ContactService } from './../-services/contact.service';
import { Component, OnInit} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-contact-edit',
  templateUrl: './contact-edit.component.html',
  styleUrls: ['./contact-edit.component.css']
})
export class ContactEditComponent implements OnInit {
  contact: any; // 替换成你实际的Contact类型
  originalContact: any; // 存储原始数据的深拷贝副本
  showActionButtons = false; // 控制保存/取消按钮的显示状态

  constructor(
    private contactService: ContactService,
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit() {
    // 从路由获取联系人ID
    const contactId = this.route.snapshot.paramMap.get('id');
    // 获取服务器数据并保存原始副本
    this.contactService.getContact(contactId).subscribe(fetchedContact => {
      this.contact = fetchedContact;
      // 用JSON序列化/反序列化实现深拷贝（适合简单数据结构）
      this.originalContact = JSON.parse(JSON.stringify(fetchedContact));
    });
  }

  // 表单内容变化时显示操作按钮
  onFormModified() {
    this.showActionButtons = true;
  }

  // 保存数据到服务器
  onSave() {
    this.contactService.updateContact(this.contact).subscribe(() => {
      // 保存成功后，更新原始副本（避免下次取消时回滚到旧数据）
      this.originalContact = JSON.parse(JSON.stringify(this.contact));
      this.showActionButtons = false;
      // 可以跳转到联系人详情页或其他页面
      this.router.navigate(['/contacts', this.contact.id]);
    });
  }

  // 取消修改，回滚到原始数据
  onCancel() {
    // 把原始副本深拷贝回去，避免后续修改影响原始数据
    this.contact = JSON.parse(JSON.stringify(this.originalContact));
    this.showActionButtons = false;
  }
}

对应的模板示例（以模板驱动表单为例）：

<form (ngSubmit)="onSave()" (change)="onFormModified()">
  <div class="form-group">
    <label>姓名</label>
    <input type="text" [(ngModel)]="contact.name" name="name" class="form-control">
  </div>
  <div class="form-group">
    <label>邮箱</label>
    <input type="email" [(ngModel)]="contact.email" name="email" class="form-control">
  </div>

  <!-- 仅在表单修改后显示操作按钮 -->
  <div *ngIf="showActionButtons" class="mt-3">
    <button type="submit" class="btn btn-primary mr-2">保存</button>
    <button type="button" class="btn btn-secondary" (click)="onCancel()">取消</button>
  </div>
</form>

注意事项 #

• 如果你的数据包含复杂类型（比如Date对象、自定义类实例），JSON.parse(JSON.stringify())会把Date转成字符串，这时候需要手动转换回去，或者使用更专业的深拷贝工具（比如lodash的cloneDeep方法）。
• 如果你用的是响应式表单，取消时需要调用formGroup.setValue(this.originalContact)或者formGroup.patchValue(this.originalContact)来更新表单控件的值，而不是直接修改绑定对象。

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