1

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

下面是我的代码。我可以有'n'个员工。我希望员工在输入框中输入签名。

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

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

}
<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>

4

1 回答 1

0

在您的带有两个 SignaturePad 实例的示例中，我认为您必须使用两个 ViewChild 引用，如下所示：

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

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

于 2017-06-17T23:17:04.010 回答