изображение не обновляется после съемки фотографии с камеры

Question

Я использую этот простой код с ионным 2:

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

Тогда это моя Машинопись страница:

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"; 
*/ 
} 

} 

После не принимая картину, ничего отображается. Я заметил, что «src» не обновляется Angular. Я тестировал часть кода в комментариях, которые работают с использованием «var image = ... image.src = ...», но непосредственно манипулируют DOM, и я не хочу этого.

У вас проблемы с этим вопросом?

Answer 1

Вы должны использовать другой подход к функции обратного вызова, названному arrow function notation:

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)); 
    }, {}); 
} 

Обратите внимание, как я заменил function() {} с () => {}, этой дорогой this в this.url на самом деле относится к объекту компоненты

Answer 2

Попробуйте использовать zone.run() для повторного входа в угловую зону из задачи, выполненной за пределами угловой зоны.

Это работало для меня для задач async с локальным хранилищем.

Что-то вроде:

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

     console.log("URI of the picture taken is : "+imageURI); 
     zone.run(()=>{ this.url = imageURI; }) 

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

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

Answer 3

я наконец сделал это работало, вот полный код решение:

https://github.com/angular/angular/issues/6340#issuecomment-179712658

Необходимо использовать zone.run() вокруг собственности, чтобы быть измененная и вводимая переменная зоны в конструктор

конструктор вашего компонент должен выглядеть

export class PicutrePage { 
    constructor(app: IonicApp, nav: NavController, params: NavParams, NgZone zone) { 
    this.nav = nav; 
    this.thumbnail = 'img/placeholder.png';  
    this.zone = zone; 
    }