Ionic 3 does not refresh view

Question

Hi, I have a function that will be updated after an HTTP request to the server. It looks like console.log shows that the value has been updated, but the user interface is not updated unless I clicked on any other component (e.g. input).

This is my function:

fileTransfer.upload(this.created_image, upload_url, options) .then((data) => { console.log("success:"+data.response); //This is showing correct response var obj = JSON.parse(data.response); this.sv_value = obj.value; console.log(this.sv_value); //This is showing correct value }, (err) => { console.log("failure:"); }) 

This is my html view:

  <ion-row> <ion-col center width-100 no-padding> <h2>{{sv_value}}</h2> //This is not updated </ion-col> </ion-row> 

Is there any way to solve this problem? thank you

Answer 1

Try placing this.sv_value = obj.value; inside NgZone.run(); to make Angular detect changes.

 import { Component, NgZone } from "@angular/core"; ... export class MyComponentPage { constructor( private zone: NgZone ... ){ } yourFunction(){ fileTransfer.upload(this.created_image, upload_url, options) .then((data) => { console.log("success:"+data.response); //This is showing correct response var obj = JSON.parse(data.response); this.zone.run(() => { this.sv_value = obj.value; }); console.log(this.value); //This is showing correct value }, (err) => { console.log("failure:"); }); } } 

Answer 2

Unfortunately, it also works great by adding this line.

 Observable.interval().subscribe(); 

You need to import these two lines.

 import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/interval';