开发者问题收集

NgZone 或 ChangeDetectorRef 在 Ionic 3 中不起作用

2018-06-16
1608
angular ionic3

我在 ionic 3 iOS 应用中使用 cordova-plugin-document-scanner 插件，它允许我使用一些附加功能拍摄照片。一切正常，我在成功回调 (file:///...) 中获得了 fileURI。

拍照后，我无法更新 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';
       ...
  })
2个回答

您遇到了“this”问题 - 如果在回调中调用 onSuccess 方法，则它不会指向 home 组件。

要修复此问题，您可以通过粗箭头进行分配：

onSuccess = () => { 您的代码在这里 }

您的答案有效的原因是您使用了粗箭头函数，它不会创建新的“this”上下文。

Sergey Rudenko
2018-06-16

我找到了一个可行的解决方案： 

takePicture() {

    this._images = true;

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

  }
mm1975
2018-06-16