即使显示在ng-popover内的ng-template内的复选框也无法访问

Question

我在ngbpopover调用的ng-template内有一个复选框。该复选框已显示，但是我无法选中或取消选中该复选框。但是，当它在stackblitz中编码时，它可以工作。

Stackblitz代码- https://stackblitz.com/edit/angular-4ueruh?file=src%2Fapp%2Fpopover-triggers.html

<div class="container sr-get-your-text">
  <div class="row">
    <div class="col-12">
      <!-- Page title -->
      <sr-title [value]="content.title"></sr-title>
      <!-- Reading name and author -->
      <div class="get-your-text-subtext" [innerHtml]="content.subText"></div>
      <div class="sr-path-selection">
        <button
          *ngFor="let option of options; trackBy : trackEntryItems"
          [attr.aria-label]="option.label"
          [value]="option.name.toLowerCase()"
          [innerText]="option.name"
          [ngClass]="{'sr-path-selected': option.selected}"
          [ngbPopover]="(option.name.toLowerCase() === 'anthology') && !showAgainCheck && popContent"
          placement="top"
          #popoverCheckbox="ngbPopover"
          (click)="onPathSelect(option)"></button>
      </div>
      <!-- Recommendation -->
      <div class="recommendation" [innerHtml]="content.recommendation"></div>
      <button srPrimaryButton
              *ngIf="isOptionSelected"
              [isButtonBar]="true"
              (click)="onContinue()">Continue
      </button>
    </div>
  </div>
</div>

<ng-template #popContent>
  <form [formGroup]="showAgainForm" #frm="ngForm">
    <div class="form-check" (mouseleave)="onHoverOutside()">
      <input
        id="showAgain"
        formControlName="showAgainCheckBox"
        class="form-check-input"
        type="checkbox"
        [checked]="showAgainCheck"
        (click)="onChanged(frm)">
      <label for="showAgain" class="form-check-label">Show Again</label>
    </div>
  </form>
</ng-template>

预计可以选中该复选框。 结果是它不可访问。