如何修复ngx-signaturepad中“无法读取未定义的属性'toDataURL‘”的问题

Question

我使用的是Angular 9的ngx-signaturepad。绘图部分工作得很好，但在drawComplete()中，我得到了这个错误"Cannot read property 'toDataURL‘of undefined“，因为this.signaturePad为null，我不知道如何修复它。任何想法都将不胜感激。

  import { Component, AfterViewInit, ViewChild } from '@angular/core';
  import { SignaturePad } from 'ngx-signaturepad/signature-pad';

  @Component({
    selector: 'ci-signature',
    template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
  })

  // Uses: https://www.npmjs.com/package/ngx-signaturepad
  export class SignatureComponent implements AfterViewInit {
    @ViewChild(SignaturePad, { static: false }) signaturePad: SignaturePad;

    public signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
      'minWidth': 5,
      'canvasWidth': 500,
      'canvasHeight': 300
    };

    ngAfterViewInit() {
      // this.signaturePad is now available

      this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
      this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
    }

    drawComplete() {
      // will be notified of szimek/signature_pad's onEnd event
      console.log(this.signaturePad.toDataURL());
    }

    drawStart() {
      // will be notified of szimek/signature_pad's onBegin event
      console.log('begin drawing');
    }

  }

Answer 1

@yurzui回答了这个问题，谢谢Yurzui！

以下是工作代码

  import { Component, AfterViewInit, ViewChild } from '@angular/core';
  import { SignaturePad } from 'ngx-signaturepad';

  @Component({
    selector: 'ci-signature',
    template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
  })

  // Uses: https://www.npmjs.com/package/ngx-signaturepad
  export class SignatureComponent implements AfterViewInit {
    @ViewChild(SignaturePad, { static: true }) signaturePad: SignaturePad;

    public signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
      'minWidth': 5,
      'canvasWidth': 500,
      'canvasHeight': 300
    };

    ngAfterViewInit() {
      // this.signaturePad is now available

      this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
      this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
    }

    drawComplete() {
      // will be notified of szimek/signature_pad's onEnd event
      console.log(this.signaturePad.toDataURL());
    }

    drawStart() {
      // will be notified of szimek/signature_pad's onBegin event
      console.log('begin drawing');
    }

  }