Ionic 3 not updating view

Question

Hi I got a function which will update after a http request to the server. It seems that the console.log show that the value has been updated but the UI is not updating unless I click on any other component(ex. 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 view html:

    <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 I can tackle this issue? Thank you

Answer 1

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

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

I was facing the exact same issue in Ionic 4 and this is how I fixed it:

import { ChangeDetectorRef } from '@angular/core';  constructor(private changeRef: ChangeDetectorRef)  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     this.changeRef.detectChanges(); // ---> Add this here }, (err) => {     console.log("failure:"); }) 

Essentially by using detectChanges(), we are forcing the platform to detect the changes and kick them into the UI.