Angular Communication between components data is not saved

Question

I'm trying to communicate between my 2 components. In first component I have list with items and I want to send one of this item to my second component to edit them. In first component I set data in my service and in second component I want read this data from service, data is coming but when I set this data to my array after leave ngOnInit method my array is clear.

It is my onClick for edit button in first component

editPurchasesInvoice(i : number) {
this.purchasesService.editPurchasesInvoice(this.purchasesInvoices[i].gpInvoiceitemsByGpInvoiceRecid);
this.router.navigate(['new'], {relativeTo: this.route});
}

Service methods

subject = new Subject<any>();

editPurchasesInvoice(invoiceItems: GpInvoiceitem[]) {
    this.subject.next({invoice: invoiceItems});
  }

  getEditedInvoice(): Observable<any> {
    return this.subject.asObservable();
  }

it is my scond component

ngOnInit() {
    this.subscription = this.purchaseService.getEditedInvoice().subscribe( data => {
      this.invoiceItems.push(data.invoice);
    });
  }

After leave ngOnInit method data is lost.

where are you trying to access it? What does "Leave ngonit" mean? — Poul Kruijt
– Poul Kruijt, Commented Jun 16, 2019 at 10:23
I want use my invoiceItems array in HTML file and display all of these items. In ngOnInit method after push data into invoiceItems array it is not empty, everywhere else array is empty — P.W94
– P.W94, Commented Jun 16, 2019 at 10:27
There is too little information to reproduce. You should post your HTML structure and the relation between the two components. One possible solution could be to use a BehaviorSubject instead of a Subject inside your service — Poul Kruijt
– Poul Kruijt, Commented Jun 16, 2019 at 10:37
Do you have multiple instances of your Service class? How are you injecting them? — Nicholas K
– Nicholas K, Commented Jun 16, 2019 at 10:37
@PierreDuc I used BehaviorSubject and now it is working properly, data is displaying I also changed way to initialize invoiceItems to this.invoiceItems = data.invoice; — P.W94
– P.W94, Commented Jun 16, 2019 at 10:50

Poul Kruijt · Accepted Answer · 2019-06-16 11:13:38Z

A subscription to a Subject will only be received once new data is transmitted. A BehaviourSubject will emit the last pushed data on subscription. You can also use a ReplaySubject, which is basically the same, but where you can control the count of emits and you do not need to specify an initial value.

As stated in the comments, you should update your service to use either of these two, considering your data, I suggest a ReplaySubject:

readonly subject = new ReplaySubject<any>(1)

editPurchasesInvoice(invoiceItems: GpInvoiceitem[]) {
  this.subject.next({invoice: invoiceItems});
}

getEditedInvoice(): Observable<any> {
  return this.subject.asObservable();
}

Collectives™ on Stack Overflow

Angular Communication between components data is not saved

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related