Вложенный флажок в 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()" />
                ...

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

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

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 для демонстрации.