如何在Ionic 3中动态渲染离子复选框？

Question

我想在html页面中动态呈现ion-checkbox。我尝试使用以下内容：

在.ts文件中：

sanitizeLetterBody = (letterBody): string => {
  let replaceText = "<ion-item><ion-label><b>Read and approved with initials below. </b></ion-label><ion-checkbox class='letter-initials'></ion-checkbox></ion-item>";
  return letterBody.split("#PAT_SIGN_INITIAL#").join(replaceText);
}

在.html文件中：

<ion-row>
    <ion-col class="padding-top-10 padding-left-0 padding-right-0 padding-bottom-0">
        <div class="letter-body white-space-pre-line" [innerHTML]="customLetterData.LetterBody | safeHtml:'html'"></div>
    </ion-col> 
</ion-row>

但是，复选框没有在html页面中呈现，如下所示：

然后我尝试使用<input type='checkbox'>，如下所示：

sanitizeLetterBody = (letterBody): string => {
  let replaceText = "&nbsp;<input type='checkbox' class='check-pat-initials' name='test'><b>Read and approved with initials below.</b>&nbsp;";
  return letterBody.split("#PAT_SIGN_INITIAL#").join(replaceText);
} 

该复选框呈现得非常好但我无法选中或取消选中复选框。可能没有事件以这种方式具有约束力。

1. 为什么我无法选中或取消选中动态呈现的复选框？
2. 有没有不同的方法来实现这一目标？