Nativescript bind value inside image-picker function

Question

I am using image-picker plugin. I can open images gallery and select single or multiple images.

My problem is how to bind the path of the image to the xml image src?! It doesn't work inside getImage() function.

xml:

<Image class="imageSource" src="{{ thumb }}" stretch="none" />

typescript:

import { Observable } from 'data/observable';
import * as imagepicker from "nativescript-imagepicker";

var counter = 0;
var fs = require('file-system');

export class AssistenceViewModel extends Observable {

    thumb:any;

public addImage(){
    dialogs.action({
        message: "Opções", 
        cancelButtonText: "Cancelar", 
        actions: ["Câmera", "Galeria"]
    }).then(result => {

        console.log("Dialog result: " + result);
        if(result == "Câmera"){

            //Do action1
            console.log("Abrir camera");

        }else if(result == "Galeria"){

            console.log("Abrir galeria");
            let context = imagepicker.create({
                mode: "single"
            });

            context.authorize().then(function() {
                return context.present();
            }).then(function(selection) {

                selection.forEach(function(selected){

                    selected.getImage().then(function(imagesource){

                        var localPath = null;

                        if(platformModule.device.os === "Android"){
                            localPath = selected.android;
                            console.log("localPath android: " +localPath);
                        }else {
                            // selected_item.ios for iOS is PHAsset and not path - so we are creating own path
                            let folder = fs.knownFolders.documents();
                            let path = fs.path.join(folder.path, "Test" + counter + ".png");
                            let saved = imagesource.saveToFile(path, "png");

                            localPath = path;
                            console.log("localPath iOS: " +localPath);
                        }

                        if(localPath){
                            this.thumb = localPath  // this is not working
                            console.log("thumb: "+this.thumb); // this is not working
                        }

                    });

                });                 

            }).catch(function(e) {
                console.log(e);
            });
        }
    });
  }
}

The result for console.log("localPath android: " +localPath);

localPath android: /storage/emulated/0/DCIM/Camera/IMG_20171213_224917038.jpg

but I cannot get any log for this.thumb .

Answer 1

You should either use TS arrow functions to preserve the context of this of "cache the meaning of this"

eg for arrow functions // more code above this line

.then(() => {
                return context.present();
            }).then((selection) => {

                selection.forEach((selected) => {

                    selected.getImage().then((imagesource) => {

Or that = this; pattern

var that = this;
// ... your code in the promises follows
that.thumb = newValue;