角度父垫对话框组件从子垫对话框组件更改

Question

我正在打开一个垫子对话框来创建一些对象。在这个垫子对话框中，我可以通过单击“预览”按钮来预览一些数据，然后从我的父对话框中打开子垫子对话框，我在其中传递一个对象进行预览。问题是这个对象包含照片的 base64 格式，在打开的垫子对话框中我正在将照片更改为下一种格式：

data:image/png;base64,${base64_photo}

。但由于某种原因，它在主垫对话框中也会发生变化，当我尝试打开同一对象的预览更多时间时，照片不会像 base64 那样，但它将是下一种格式：

data:image/png;base64,${base64_photo}

。而我打开同一个物体的预览多少次，这么多次

data:image/png;base64,

就会被加进去。我试图传递像

{...this.scenario[i]}

或

Object.assign({}, this.scenario[i])

这样的东西，但它仍在变化。在下面你可以看到代码。

我在这里打开特定场景的对话：

openPreviewModel(i: number) {
  this.matDialog.open(PreviewScenariosComponent, {data: this.scenarios[i]});
}

这是我正在更改照片的第二个垫子对话框：

constructor(private matDialogRef: MatDialogRef<PreviewScenariosComponent>,
    private _client: BackendService, @Inject(MAT_DIALOG_DATA) public data: any) {
}

ngOnInit(): void {
  // console.log(this.data)
  this.scenario = this.data as ScenarioPreview;
  for (let j = 0; j < this.scenario.photos.length; j++) {
    let base64_photo = this.scenario.photos[j]
    this.scenario.photos[j] = `data:image/png;base64,${base64_photo}`
  }
  this.current_photo = this.scenario.photos[this.current_photo_index];
}

如果需要，这是我的场景预览模型：

export class ScenarioPreview {
  id: number = 0;
  name: string = "";
  description: string = "";
  languages: string[] = [];
  photos: string[] = [];

  public constructor(init?: Partial<ScenarioPreview>) {
    Object.assign(this, init);
  }
}

我期待了解我在哪里犯了错误。

附言我想当我阅读所有场景时我可以在主对话框中添加这个字符串并且不要在子对话框中这样做并且问题应该消失，但我很感兴趣我做错了什么。

Answer 1

我刚用过

JSON.parse(JSON.stringify(object))

垫子对话框，当将一个对象从父级传递到子垫子对话框时，它在子级和父级中都发生了变化。因此，为了避免这种情况，有必要使用复制对象而不是传输对象本身。

Object.assign({}, this.scenario[i])

没有帮助。但反过来，

JSON.parse(JSON.stringify(this.scenarios[i]))

一切正常。相反，错误在于

Object.assign()

没有复制数组，从而传递了对父对象的引用