Question

我正在使用签名板，我需要捕获多个签名。

下面是我的代码。我可以拥有＆＃39; n＆＃39;在职员工人数。我希望员工在输入框中输入签名。

当您点击提交时，您将收集所有数据。请帮忙

＆＃13;

import { Component, ViewChild } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  sigUrl:any;
  @ViewChild(SignaturePad) signaturePad: SignaturePad;
  private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
    'minWidth': 5,
    'canvasWidth': 200,
    'canvasHeight': 150
  };

  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() {
    this.sigUrl = this.signaturePad.toDataURL();
    console.log("Sign: "+this.sigUrl);
  }

}

＆＃13;

<table>
  <tbody>
  <tr>
    <td>Employee 1</td>
    <td><input type="text" #emp1 /></td>
    <td><signature-pad [options]="signaturePadOptions" (onEndEvent)="drawComplete()" #sig1></signature-pad></td>
  </tr>
  <tr>
    <td>Employee 2</td>
    <td><input type="text" #emp2 /></td>
    <td><signature-pad [options]="signaturePadOptions" (onEndEvent)="drawComplete()" #sig2></signature-pad></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="button" value="Clear" #clear /></td>
    <td><input type="Submit" #submit /></td>
  </tr>
  </tbody>


</table>

＆＃13;

Answer 1

在你的两个SignaturePad实例的例子中，我认为你必须使用两个这样的ViewChild引用：

@ViewChild("sig1") sig1: SignaturePad;
@ViewChild("sig2") sig2: SignaturePad;

但是对于可变数量的实例，您可能需要动态调查添加组件。您可以在此处查看Angular文档： https://angular.io/guide/dynamic-component-loader

Angular 2：Signature Pad需要单独的实例

1 个答案: