图像选择器函数中的 Nativescript 绑定值 [英] Nativescript bind value inside image-picker function

问题描述

我正在使用图像选择器插件.我可以打开图片库并选择单个或多个图像.

我的问题是如何将图片的路径绑定到xml图片src?！它在 getImage() 函数中不起作用.

xml:

打字稿:

import { Observable } from 'data/observable';import * as imagepicker from "nativescript-imagepicker";无功计数器 = 0;var fs = require('文件系统');导出类 AssistenceViewModel 扩展了 Observable {拇指:任何；公共添加图像(){对话框.动作({消息:Opções"，cancelButtonText: "取消",动作:[Câmera"，Galeria"]}).那么(结果=> {console.log("对话结果:" + result);如果(结果==相机"){//做动作1console.log("Abrir 相机");}else if(result == "Galeria"){console.log("Abrir 画廊");让上下文 = imagepicker.create({模式:单人"});context.authorize().then(function() {返回 context.present();}).then(函数(选择){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);}别的 {//selected_item.ios for iOS 是 PHAsset 而不是路径 - 所以我们正在创建自己的路径让文件夹 = fs.knownFolders.documents();let path = fs.path.join(folder.path, "Test" + counter + ".png");让保存 = imagesource.saveToFile(path, "png");本地路径 = 路径；console.log("localPath iOS: " +localPath);}如果(本地路径){this.thumb = localPath//这不起作用console.log("拇指:"+this.thumb);//这不起作用}});});}).catch(函数(e){控制台日志(e)；});}});}}

console.log("localPath android: " +localPath); 的结果；

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

但我无法获得 this.thumb 的任何日志.

解决方案

你应该使用 TS 箭头函数 用于保留 缓存 this 的含义" 的上下文>

例如对于箭头函数//此行上方的更多代码

.then(() => {返回 context.present();}).then((选择) => {selection.forEach((selected) => {selected.getImage().then((imagesource) => {

或者 that = this; 模式

var that = this;//...您在承诺中的代码如下that.thumb = newValue;

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.

解决方案

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

e.g. 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;

这篇关于图像选择器函数中的 Nativescript 绑定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！