Angular 6 - 对象属性更新而不设置它们

Question

我有一个编辑器，用户可以在其中编辑产品。我在initialProduct 下的ngOnInit 中保存了一个产品实例，以便重置编辑。

不幸的是，我遇到了一个奇怪的问题：添加新标签时，initialProduct 的属性会在未设置的情况下更改。

这是一个堆栈闪电战：

https://stackblitz.com/edit/angular-yxrh2d?file=src%2Fapp%2Fapp.component.ts

Answer 1

因为引用

this.tags = this.product.tags;

您可以执行以下操作（ES6）：

this.tags = [...this.product.tags];

Answer 2

使用此代码

this.initialProduct = this.product;

您将分配给this.initialProduct 的相同变量位于与this.product 相关的内存索引处。这是因为this.product 指向一个内存地址，而在前面的操作中，您只复制了内存地址。所以this.product 和this.initialProduct 指向同一个变量。

您需要创建另一个数组并将this.product 值复制到this.initialProduct（新数组）。

您可以通过多种方式做到这一点。例如：

    // this.initialProduct = this.product;
    this.initialProduct = {
      tags: Array.from(this.product.tags)
    }

或

    // this.initialProduct = this.product;
    this.initialProduct = {
      tags: this.product.tags.concat()
    }

或

    // this.initialProduct = this.product;
    this.initialProduct = {
      tags: this.product.tags.slice()
    }