ngbTabTitle 中的嵌套复选框不起作用

【问题标题】：Nested checkbox in ngbTabTitle not workingngbTabTitle 中的嵌套复选框不起作用
【发布时间】：2018-12-07 06:45:33
【问题描述】：

我试图在标签集标题中添加一个复选框，但它似乎不起作用。我真的很感激一些帮助。我的简化代码如下所示：

    <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()" />
                ...

正如我在第二个“测试复选框”和控制台中看到的那样，模型正在更改，但标题中的复选框未显示激活状态。请问有谁知道这会如何工作？

问候，拉尔斯

【问题讨论】：

标签： checkbox tabs ng-bootstrap ng-template

【解决方案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
}

请参阅this StackBlitz 进行演示。

【讨论】：