离子3不更新视图 [英] Ionic 3 not updating view

问题描述

我得到了一个功能，该功能将在向服务器发出http请求后更新.似乎console.log显示值已更新，但是UI不会更新，除非我单击任何其他组件(例如输入).

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

这是我的功能:

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

这是我的html视图:

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

推荐答案

尝试将this.sv_value = obj.value;放在NgZone.run();内，以使Angular检测到更改.

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

这篇关于离子3不更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！