角度 2:签名板需要单独的实例

Question

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

下面是我的代码。我可以有"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>

Answer 1

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

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

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