FormSubmit doesn't update value without refresh page

Ionic Framework Ionic Angular
1

Hi dear all,

I’m facing to an issue concerning my form submit. When I submit my form, the values are updated well but not reactive. I have to refresh the page to see the modification. I’m using Ionic v4 / Angular 8 / API.

invoice-service.ts

 getInvoice(id:number): Observable<Invoice>{
    return this.http.get<Invoice>(`${environment.apiUrl}api/invoices/${id}`)
}

getInvoiceItems(invoiceId:number): Observable<InvoiceItem[]> {
    return this.http.get<InvoiceItem[]>(`${environment.apiUrl}api/invoiceitems`)
    .pipe(
        map((invoiceitems : InvoiceItem[]) => invoiceitems.filter(inv => inv.invoice_id == invoiceId))
    );
}

 updateInvoiceItems(id:any, invoiceitems:any):Observable<any>{
        return this.http.patch(`${environment.apiUrl}api/invoiceitems/${id}`, invoiceitems, this.httpOptions)
          .pipe(
            tap(_ => console.log(`updated invoice id=${id}`)))
    }

invoice-details.ts

 ngOnInit() {

    this.id = this.route.snapshot.params['id'];

    this.invoiceService.getInvoice(this.id).subscribe(result => {
      this.item = result;
      //console.log(this.item)
    })
    this.invoiceService.getInvoiceItems(this.id).subscribe(result => {
      this.data = result;
     //console.log(this.data)
    })
  }

For my test, I’m using the property

window.location.reload()

but it’s not what I want to do for a clean code.

Thank you

2

I’m not sure exactly what you’re expecting to happen, so I can only speak in generalities.

Anything you write in a lifecycle event handler should perfectly fine with being executed only once, or many times. The only thing you should rely on is that with paired ones (such as ngOnInit / ngOnDestroy), they’ll be paired. You won’t get two calls to ngOnInit without an intervening ngOnDestroy.

So, if you’re going to wire up sources of data in ngOnInit, they have to be capable of responding to changes if that can happen. Sometimes you don’t care about this. This is apparently not one of those times. So, as I see it you have two choices: move what is in ngOnInit now out of it, or don’t use snapshots in there - subscribe to long-lived Observables instead, as described in here.

3

What I’m expecting is the following:

  • I’m listing my data
  • I’m clicking into edit button to update value
  • I’m updating the value
  • when I submit my form to confirm the new value, them are updated to the API in back but not directly to the page. I need to refresh the page to check the changes
4

Hello @Anth0ny24,
When you click Edit button, if you navigate to Edit page and after Submit the button you return to List page. You should use ionViewWillEnter. This function will run functions in it everytime you navigate to List page. If you are at Editing in the Listing page. You should call get data after Editing Submitted.
Basically you should run getdata function after your submission.

ionViewWillEnter() {
    this.getAllData();
  }
5

Hi allbayrak,

it’s worked well

Thank you so much

1 Like