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

时间:2018-10-04 16:00:27

标签: html angular typescript angular6

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

不幸的是,我遇到一个奇怪的问题:添加新标签时,initialProduct的属性会更改而未设置。

这是一个令人眼花stack乱的事情:

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

2 个答案:

答案 0 :(得分:2)

使用此代码

this.initialProduct = this.product;

您正在将this.initialProduct所关联的相同变量分配给this.product。这是因为this.product指向一个内存地址,并且在上一步操作中您仅复制了该内存地址。因此this.productthis.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()
    }

答案 1 :(得分:1)

由于引用

this.tags = this.product.tags;

您可以执行以下(ES6):

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