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

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

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

Я попытался нажать на 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)

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

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

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

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

Дочерний Component.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
  }

angular pass-data eventemitter angular-event-emitter
person k.chinni66    schedule 15.04.2020    source источник
comment
Попробуйте создать копию значений: this.formSubmit.emit(JSON.parse(JSON.serialize(this.cashEntryItem)))   -  person David    schedule 15.04.2020
comment
Спасибо Дэвиду за предложение. Это сработало для меня. Передача как String мне помогла. Получил приведенное ниже утверждение из одного блога: - если мы передадим объекты в декораторе @Output (), тогда он будет передан как ссылка, а если мы передадим примитивные типы, то он будет передан как значение.   -  person k.chinni66    schedule 15.04.2020

Ответы (1)


arrow_upward
2
arrow_downward

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

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}) 
   })
}
person Eliseo    schedule 15.04.2020