How to update the view after database change with IONIC 2

Question

I am developing an application with IONIC 2 where I consume a REST webservice from an application that is running online. When opening the page, I request and display the information correctly on the screen, however, when an item is inserted or changed on the server, the view does not update, but when I exit and return to the page.

Some code snippets that are being used:

vision:

<span *ngFor="#item of depoimentos">{{item.nome)}}</span>

Controller class that initializes testimonials:

ngOnInit() {
this.service.findAll().subscribe(
  data => {
    this.depoimentos = data;
    console.log(this.depoimentos);
    if (this.depoimentos.length > 0) {
      this.depoimentos[0].visivel = true;
    }
  }
)}

Excerpt from the service that makes the request:

findAll() {
    return this.http.get(depoimentosURL)
        .map(res => res.json())
        .catch(this.handleError);
}

Remember: I am using Ionic 2, which works with the angular v2.0.0-beta.15

Answer 1

To make a page real-time you must use the timer function of an Observable to perform the refresh of the page.

For example, when starting the page we should call the function responsible for obtaining the service data:

private timerSubscription: AnonymousSubscription;
private depoimentosSubscription: AnonymousSubscription;

ngOnInit() {
    this.refreshServico(); // função para obter dados do serviço 
}

In the function that calls the service to get the data you want, you must call a function that will perform the Reload of the data in a certain range:

private refreshServico(): void {

       this.depoimentosSubscription = this.service.findAll().subscribe(
          data => {
            this.depoimentos = data;
            console.log(this.depoimentos);
            if (this.depoimentos.length > 0) {
              this.depoimentos[0].visivel = true;
            }
            this.subscribeDados();
          }
        );
}

And finally add the timer to call the service automatically after a certain period:

 private subscribeDados(): void {
    this.timerSubscription = Observable.timer(1000).first().subscribe(() => this.refreshServico()); 
}

Calling refreshServico() function for each successful event prevents multiple calls to the service when it takes longer than the time set in the timer (in 1s).

It is important to remember that you should remove the subscribe in the onDestroy() method to avoid memory Leaks.

  public ngOnDestroy(): void {
    if (this.depoimentosSubscription) {
        this.depoimentosSubscription.unsubscribe();
    }
    if (this.timerSubscription) {
        this.timerSubscription.unsubscribe();
    }
}