从相机拍摄照片后图像没有刷新

Question

我在ionic 2中使用此简单代码：

<button (click)="takePicture()" >Take a pic!</button>
<img [src]="url || '//:0'">

这是我的Typescript页面：

import {Page} from "ionic-framework/ionic";

@Page({
    templateUrl: 'build/pages/smartscan/smartScan.html'
}
)

export class SmartScan {

public url:string;

constructor() {
    console.log("Starting SmartScan page ...");
}

public takePicture() {
    console.log("Going to take a pic ...");
    navigator.camera.getPicture( (imageURI) => {

        this.url = imageURI;

        console.log("URI of the picture taken is : "+this.url);

        console.log(JSON.stringify(this));

        //var image = document.getElementById('myImage');
        //image.src = imageURI;

    }, function (err) {
        console.log(JSON.stringify(err));
    }, {});

   /* this.url = "http://maison-cresci.fr/uploads/images/nice_cresci_slide_environnement_003.jpg";
*/
}

}

拍照后，什么也不显示。我注意到Angular不会更新“ src”。我在使用“ var image = ... image.src = ...”的注释中测试了部分代码，但直接操作了DOM，但我不希望这样做。

请问问题出在哪里？

Answer 1

您需要对回调函数使用不同的方法，称为箭头函数表示法：

public takePicture() {
    console.log("Going to take a pic ...");
    navigator.camera.getPicture((imageURI) => {
         this.url = imageURI;

         console.log("URI of the picture taken is : "+this.url);

        //var image = document.getElementById('myImage');
        //image.src = imageURI;

     }, (err) => {
         console.log(JSON.stringify(err));
    }, {});
}

请注意我如何将 the 替换function() {}为() => {}，这样thisinthis.url实际上指的是组件对象