angular - Ionic 3 不更新 View

Question

您好，我有一个函数，它会在向服务器发出 http 请求后更新。 console.log 似乎显示该值已更新，但除非我单击任何其他组件(例如输入)，否则 UI 不会更新。

这是我的功能:

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:

    <ion-row>
      <ion-col center width-100 no-padding>
        <h2>{{sv_value}}</h2> //This is not updated
      </ion-col>
    </ion-row>

有什么办法可以解决这个问题吗？谢谢

Answer 1

尝试将 this.sv_value = obj.value; 放在 NgZone.run(); 中，让 Angular 检测到变化。

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