Angular对话框预算值自动覆盖：需点击保存后才更新

这个问题本质是双向绑定的实时同步特性导致的——你在ngOnInit里直接把获取到的预算值赋值给了与UI绑定的变量，用户在对话框输入时，双向绑定会立刻把输入值同步到UI显示，而不是等你点击保存后再更新。下面给你两个实用的解决思路：

思路1：使用局部副本隔离输入与源数据 #

这是最直接的方案，核心是让对话框的输入控件绑定一个局部变量，只有点击保存时才把局部变量的值同步回源数据：

步骤1：在对话框组件中定义局部变量 #

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; // 如果你用Angular Material Dialog

@Component({
  selector: 'your-dialog-component',
  templateUrl: './your-dialog.component.html'
})
export class YourDialogComponent {
  localBudget: number; // 局部变量，用于绑定对话框的输入框

  constructor(
    public dialogRef: MatDialogRef<YourDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any // 假设父组件传递的数据存在data里
  ) {}

  ngOnInit(): void {
    // 初始化时把预算值复制到局部变量，而不是直接绑定源数据
    this.localBudget = this.data.budget;
  }

  onSave(): void {
    // 点击保存时，才把局部变量的值同步回源数据
    this.data.budget = this.localBudget;
    this.dialogRef.close(this.data); // 关闭对话框并返回更新后的数据给父组件
  }

  onCancel(): void {
    this.dialogRef.close(); // 直接关闭，不做任何修改
  }
}

步骤2：修改对话框模板绑定局部变量 #

<div class="dialog-content">
  <!-- 其他可修改内容保持原样 -->
  <label>预算值：</label>
  <input type="number" [(ngModel)]="localBudget" /> <!-- 绑定局部变量 -->
  
  <div class="dialog-actions">
    <button (click)="onCancel()">取消</button>
    <button (click)="onSave()">保存</button>
  </div>
</div>

思路2：深拷贝传递给对话框的数据（针对引用类型数据） #

如果你的预算值是包含在一个对象里（比如data是引用类型），即使你用了局部变量，不小心修改对象属性也会影响源数据。这时候需要在打开对话框时对数据进行深拷贝：

// 父组件中打开对话框的代码
openDialog(): void {
  // 深拷贝数据，避免对话框直接修改源数据
  const clonedData = JSON.parse(JSON.stringify(this.yourOriginalData));
  
  const dialogRef = this.dialog.open(YourDialogComponent, {
    data: clonedData
  });

  dialogRef.afterClosed().subscribe(result => {
    if (result) {
      // 只有当对话框返回保存结果时，才更新父组件的源数据
      this.yourOriginalData = result;
    }
  });
}

这样对话框里的所有修改都只会作用在拷贝后的对象上，只有点击保存并关闭对话框后，父组件才会把源数据替换为修改后的拷贝对象，从根本上避免了实时覆盖的问题。

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