Передача объекта по значению (не по ссылке) через источник событий в Angular 8

Question

У меня есть приложение, в котором я должен передать данные из дочернего компонента в родительский компонент. Данные являются объектом.

Проблема, с которой я сталкиваюсь, заключается в том, что данные передаются по ссылке, что означает, что при изменении данных модели моего дочернего компонента также изменяется массив родительского компонента (this.cashEntryItems).

Я пытался набрать sh немного console.log (), но все равно не повезло.

Я получаю данные о событиях правильно, но не могу передавать данные только по значению (без ссылки на объект дочернего компонента)

Вот вывод моей консоли -

Console.log -> inside Parent Component.ts file

Input From Child Component 
CashEntryItem {CompOperarator: {…}, description: "test", serviceType: ServiceType, amount: 100, …}

Before Push this.cashEntryItems - 
[]

After Push this.cashEntryItems
[CashEntryItem]
  0: CashEntryItem {CompOperarator: {…}, description: null, serviceType: ServiceType, amount: null, …}
  length: 1
  __proto__: Array(0)

Я вставил свой код ниже.

Дочерний компонент -

Дочерний компонент. html

<form #itemForm="ngForm" (ngSubmit)="onSubmit()" *ngIf="isPageLoaded">

Дочерний компонент.ts

onSubmit() {
    this.formSubmit.emit(this.cashEntryItem);
  }

Родительский компонент

Родительский компонент. html

<app-child-component (formSubmit)="addItem($event)"></app-child-component>

Родительский Component.ts

  addItem(newItem: CashEntryItem) {
    this.cashEntryItems.push(newItem);
    this.cashEntryItems = this.cashEntryItems.slice(); //one suggestion from a blog - Not working
  }

Answer 1

просто используйте новую переменную во входных данных

copyEntry:any;
@Input() set cashEntryItems(value){
   this.copyEntry={...value} //if is an object
   this.copyEntry=[...value] //if is an array of string or numbers;

   //if is an array of object
   this.copyEntry=[]
   value.forEach(x=>{
      this.copyEntry.push({...x}) 
   })
}