Ionic 3 not updating view

user_2007826 0
Viewed 15300

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

ionic2 ionic3 ionic-framework angular cordova
2 Answers

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.

user_2128890
Related