Вложенный флажок в ngbTabTitle не работает

Question

Я пытаюсь поставить флажок в заголовке вкладки, но, похоже, он не работает.Я действительно ценю некоторую помощь.Мой упрощенный код выглядит следующим образом:

    <ngb-tabset>
        <ngb-tab>
            <ng-template ngbTabTitle>
                <input type="checkbox" [(ngModel)]="selectedTabs" (click)="selectTab(i)" />
                Result
            </ng-template>

            <ng-template ngbTabContent>
                <input type="checkbox" [(ngModel)]="selectedTabs" (click)="selectTab()" />
                ...

Модель меняется, как я вижу во втором «флажке проверки» и консоли, но состояние активации не отображается флажком взаглавие.Кто-нибудь знает, как это может сработать, пожалуйста?

С уважением, Ларс

Answer 1

Я полагаю, что обработка события в выборе вкладки ng-boostrap мешает выбору флажка (когда флажок находится в заголовке).Чтобы обойти это, вы можете передать $event в обработчик (click) для флажка и вызвать event.stopPropagation();:

HTML

<ngb-tabset>
  <ngb-tab>
    <ng-template ngbTabTitle>
      <input type="checkbox" [(ngModel)]="selectedTabs" (click)="selectTab($event)" />
      Result
    </ng-template>
    <ng-template ngbTabContent>
      <input type="checkbox" [(ngModel)]="selectedTabs" />
    </ng-template>
  </ngb-tab>
  ...
</ngb-tabset>

Машинопись

public selectTab(event): void {
    this.selectedTabs = !this.selectedTabs;
    console.log(this.selectedTabs)
    event.stopPropagation(); // Prevents event propogation and the checkbox is selected/deselected
}

Пожалуйста, посмотрите этот StackBlitz для демонстрации.