Angular 6 - Обновление свойств объекта без их установки

Question

У меня есть редактор, в котором пользователь может редактировать продукт.Я сохраняю экземпляр продукта в ngOnInit в initialProduct, чтобы можно было сбросить изменения.

К сожалению, у меня возникает странная проблема: При добавлении нового тега свойстваinitialProduct изменяется без их установки.

Вот блик стека:

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

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

Answer 2

из-за ссылок

this.tags = this.product.tags;

Вы можете сделать следующее (ES6):

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