签名板禁用复选框

Question

我正在为我的Ionic 3应用程序使用angular2-signaturepad库，并且签名板在应用程序内正常工作。现在，我已经将动态html添加到div并且在动态html内部当前只有一个复选框，但其中会有更多。

在.html文件中：

  <ion-row>
    <ion-col>
        <div class="letter-body white-space-pre-line"
                 [innerHTML]="testData | safeHtml:'html'"></div>
    </ion-col>
  </ion-row>
  <ion-row class="patient-signature-pad-input">
    <ion-col class="singnature-pad-col">
      <signature-pad [options]="signaturePadOptions"
                     (onEndEvent)="drawCompletePat()"></signature-pad>
    </ion-col>
  </ion-row>

在.ts文件中：

this.testData = "<input type='checkbox' />"

现在，复选框正确地在html中呈现，但是当我试图检查复选框时，它不起作用。

但是，有趣的是，当我从html中删除签名板时，我可以轻松地勾选复选框。

注意：已为签名板设置了z-index。

任何人都可以通过使用innerHTML添加的复选框向我指出签名板正在做什么吗？