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
}

请参阅this StackBlitz进行演示。

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

1 个答案: