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

Solution 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:");
        });
    }
}

Solution 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.

Comments

[mohamad rabee]

but you log this.value nit sv_value

[robbannn]

Did you find a solution?

[Redzwan Latif]

@mohamadrabee Sorry it's a question typo. Edited

[Redzwan Latif]

@robbannn Yeah i marked it as the best answer. Thanks!. Is this a common way of updating value in UI in Angular 2?

[Redzwan Latif]

Thanks, may I ask something? Is this a common way of updating value in UI in Angular 2? thanks

[Michael Burger]

@RedzwanLatif is this still your solution? In my case the view is only not rendered if we use it on mobile device, no problems with ionic serve, did you had the same behavior?

[Maha Rizk]

Hi! Can I ask you about the performance? I've tried this workaround but the performance has decreased.

[Cristian Rivas Gómez]

Worked for me 🎉 Thanks!