Ionic 3 not updating view

问题:

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

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

回答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.