Angular Dialog 的变化总是会覆盖 UI

Question

我在 Angular 对话框中传递数据，但与此同时，当我在对话框中编辑某些内容时，即使我没有保存数据，它也会覆盖数据。例如，我有一个对象，然后单击“编辑”它。它打开一个 Angular 对话框，其中包含该对象的所有数据。

是否只能在单击“保存”按钮时更改数据？我听说 Object.assign 它很有用，但不知道如何使用它。我尝试过，Object.assign但没有成功。为什么不起作用我认为 this.data 包含另一个数据作为 this.data.education。请参阅下面的代码这是我的对话框代码。

constructor(@Inject(MAT_DIALOG_DATA) public data: EditEducation,
              private dialogRef: MatDialogRef<EducationDialogComponent>,
              public dataService: ModelDataService) { }

  ngOnInit(): void {
    if (!this.data.edit) {
      this.data.education = {} as SubCategory;
    } else {
      ({education: this.data.education} = Object.assign({}, this.data));
    }
  }

这就是我打开对话框的方式。

  <ul>
    <li class="fa fa-pencil addIconTop" (click)="editEducation({edit: true, education: subCategory, model: model})"></li>
    <button (click)="addEducation({edit: false, model: model})" class="btn"><i class="fa fa-plus addIconBottom"></i></button>
    <button [disabled]="education.subCategories.length === 1" (click)="deleteSubCategory(i)" class="btn"><i class="fa fa-trash deleteIconRight"></i></button>
    <li class="fa fa-arrow-down moveIconDown"></li>
    <li class="fa fa-arrow-up moveIconTop"></li>
  </ul>

public editData(data: EditEducation) {
   this.dialog.open(DataDialogComponent, {
        data,
        });
  }
public addData(data: EditEducation) {
    this.dialog.open(DataDialogComponent, {
      data,
    });
  }

这是一个用于查看是否是一个新对象或是否需要编辑的界面。

export interface EditEducation {
  education?: SubCategory;
  edit?: boolean;
  model?: Model;
}

这是界面Education

export interface Education {
  subCategories: EducationSubCategory[];
}


 export interface EducationSubCategory {
  name: string;
  startDate: number;
  endDate: number;
  graduation: string;
  title?: string;
  description: string;
}

Answer 1

问题

\n

您正在经历通过引用传递变量的情况

\n

\n

Javascript 有 5 种按值传递的基本数据类型：Boolean、null、undefined、String和Number
\n分配有非基本值的变量将获得对该值的引用。该引用指向内存中的 object\xe2\x80\x99s 位置。变量 don\xe2\x80\x99t 实际上包含值
\n当使用 = 将引用类型值（对象）复制到另一个变量时，该值的地址就是实际复制的内容，就好像它一样是一个原始人。对象是通过引用复制的，而不是通过值复制的。

\n

\n

解决方案

\n

解决该问题的最简单方法是(...)在分配变量时使用扩展运算符。下面是应该解决问题的代码重构

\n

constructor(@Inject(MAT_DIALOG_DATA) public data: EditEducation,\n              private dialogRef: MatDialogRef<EducationDialogComponent>,\n              public dataService: ModelDataService) { }\n\n  ngOnInit(): void {\n    if (!this.data.edit) {\n      this.data.education = {} as SubCategory;\n    } else {\n      ({education: this.data.education} = {...this.data };\n    }\n  }\n

\n

public editData(data: EditEducation) {\n   this.dialog.open(DataDialogComponent, { ...data});\n  }\npublic addData(data: EditEducation) {\n    this.dialog.open(DataDialogComponent, {...data});\n  }\n

\n