我有一个编辑器,用户可以在其中编辑产品。我将产品的一个实例保存在ngOnInit
下的initialProduct
中,以便可以重置编辑。
不幸的是,我遇到一个奇怪的问题:添加新标签时,initialProduct
的属性会更改而未设置。
这是一个令人眼花stack乱的事情:
https://stackblitz.com/edit/angular-yxrh2d?file=src%2Fapp%2Fapp.component.ts
答案 0 :(得分: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()
}
答案 1 :(得分:1)
由于引用
this.tags = this.product.tags;
您可以执行以下(ES6):
this.tags = [...this.product.tags];