Question

我在我的离子3 iOS应用程序中使用了cordova-plugin-document-scanner插件，它允许我拍摄一些附加功能的照片。一切正常，我在成功回调中得到了fileURI（file：/// ...）。

拍摄照片后，我无法更新DOM以在我的视图home.html中显示图像。我也尝试更新一个简单的文本（测试），但它也不起作用。

我用ngZone和ChangeDetectorRef尝试过它。两个都给了我：

Error in Success callbackId: Scan683272023 : TypeError: null is not an object (evaluating 'this.test = ('changed')')

home.html的

<p>{{test}}</p>
<img [src]="image | safePipe: 'url'" #imageResult />

home.ts

import { Component, ViewChild, ElementRef, NgZone, ChangeDetectorRef } from '@angular/core';
...
declare var scan:any;
...
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  @ViewChild('imageResult') private imageResult: ElementRef;
  public imageURI: string = '';
  test: string = 'initial';
  _zone: any;
  image: string = '';
 ...

constructor(
...
   private camera: Camera,
   public changeDetector: ChangeDetectorRef,
   public platform: Platform,
   public actionsheetCtrl: ActionSheetController) {
    this._zone = new NgZone({ enableLongStackTrace: false }
   );
}

takePicture() {
    scan.scanDoc(0, this.onSuccess, this.onFail);
};

onSuccess(imageURI) {
      this.test = ('changed');
      this.image = imageURI;
      this.imageResult.nativeElement.src = this.image;
      this.changeDetector.detectChanges();
 }

 also tried:
 onSuccess(imageURI) {
       this._zone.run(() => {this.test = 'updated';
       ...
  })

Answer 1

你有'这个'问题 - 如果在回调中调用了onSuccess方法，它就没有指向home组件。

要修复你可以通过胖箭进行任务：

onSuccess =（）=＆gt; {您的代码在这里}

你的答案有效的原因是因为你使用了胖箭头功能而不会创造新的“这个”背景。

Answer 2

我找到了一个有效的解决方案：

takePicture() {

    this._images = true;

    scan.scanDoc(0,
      (onSuccess) => {
        this.image = onSuccess;
        this.imageResult.nativeElement.src = this.image;
      });

  }

NgZone或ChangeDetectorRef无法在Ionic 3中工作

2 个答案: