5

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

}

写真を撮った後、何も表示されません。「src」が Angular によって更新されていないことに気付きました。「var image= ... image.src=...」を使用して機能するコードの一部をコメントでテストしましたが、DOM を直接操作しているため、これは望ましくありません。

問題がどこにあるのか見てください。

4

4 に答える 4

4

zone.run()を使用して、Angular ゾーンの外部で実行されたタスクから Angular ゾーンに再度入るようにしてください。

これは、ローカル ストレージを使用した非同期タスクでうまくいきました。

何かのようなもの：

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));
    }, {});
}
于 2016-01-08T10:44:40.933 に答える
1

私は最終的にそれを機能させました。ここに完全なコードソリューションがあります:

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;
  }
于 2016-02-04T09:18:07.613 に答える
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));
    }, {});
}

を に置き換えた方法に注意してくださいfunction() {}。() => {}このように、thisin はthis.url実際にコンポーネント オブジェクトを参照します。

于 2016-01-07T16:23:40.973 に答える