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

Question

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

不幸的是，我有一个奇怪的问题：添加新标签时，initialProduct更改的属性没有设置它们。

这是一个堆栈闪电战：

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

标签： htmlangulartypescriptangular6

Answer 1

使用此代码

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()
    }