web-dev-qa-db-fra.com

Ionic 3 ne met pas à jour la vue

Salut, j'ai une fonction qui sera mise à jour après une requête http au serveur. Il semble que le console.log montre que la valeur a été mise à jour mais l'interface utilisateur ne se met pas à jour à moins que je ne clique sur un autre composant (ex. Entrée).

C'est ma fonction:

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

Voici ma vue html:

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

Existe-t-il un moyen de résoudre ce problème? Merci

angularcordovaionic-frameworkionic2ionic3
17
Redzwan Latif

Essayez de placer this.sv_value = obj.value; Dans NgZone.run(); pour que Angular détecte le changement).

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