Как рендерить ion-checkbox динамически в Ionic 3?

Question

Я хочу визуализировать ion-checkbox динамически на моей HTML-странице.Я попытался использовать ниже:

В файле .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. Есть ли другой подход для достижения этой цели?