Angular 2：Signature Pad需要单独实例

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