Блог

Главная - Вопросы по программированию - Как исправить “Не удается прочитать свойство ‘toDataURL’ неопределенного” в ngx-signaturepad

Как исправить “Не удается прочитать свойство ‘toDataURL’ неопределенного” в ngx-signaturepad

#angular #signature #angular9 #electronic-signature

#angular #подпись #angular9 #электронная подпись

Вопрос:

Я использую ngx-signaturepad с Angular 9. Часть рисования отлично работает, но в drawComplete() Я получаю эту ошибку «Не удается прочитать свойство ‘toDataURL’ из undefined», потому что this.SignaturePad равно нулю, и я понятия не имею, как это исправить. Любые идеи будут высоко оценены.

   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');
    }

  }

Комментарии:

1. Попробуйте использовать static:true опцию для ViewChild, например @ViewChild(SignaturePad, { static: true })

2. @yurzui — Я только что изменил его, но, к сожалению, все еще имеет ту же ошибку…

3. Попробуйте изменить импорт с import { SignaturePad } from 'ngx-signaturepad/signature-pad'; на import { SignaturePad } from 'ngx-signaturepad';

4. Это исправлено! Ты гений; спасибо @yurzui!

Ответ №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');
    }

  }