ngb-tabset 和动态创建的选项卡

Question

我正在使用 Angular 5.2.10（也在 5.0.2 中测试）+ Bootstrap 4.1.1（也在 4.0.0 中测试）+ ng-bootstrap 1.1.2 并试图使 tab-set 与动态创建的一起工作选项卡。

我正在通过*ngFor 将ngb-tabs 绑定到一个数组：

<ngb-tabset>
    <ngb-tab
      id="tab.id"
      *ngFor="let tab of tabs">

        <ng-template ngbTabTitle>
            <span>{{ tab.title }}</span>

            <span
                class="close"
                (click)="onClosiClick(tab)">
                &times;
            </span>
        </ng-template>

        <ng-template ngbTabContent>Content of {{ tab.title }}</ng-template>

    </ngb-tab>
</ngb-tabset>

但是这个非常简单的模板有 3 个问题：

1. 添加多个标签时，其内容显示在下方 另一个。
2. 无法在选项卡之间切换。
3. 在示例中单击关闭 (x) 按钮时，应用程序会重新加载。

这里是Stackblitz。另外，我在 Github 上创建了一个 issue。

我做错了什么还是ng-bootstrap 中缺少的功能？

Answer 1

id 被设置为"tab.id" 的字符串。相反，我认为应该是 [attr.id]="tab.id" 它将 id 属性设置为 tab.id 中保存的值

在 ng-bootstrap 存储库中似乎有一个未解决的问题，它为应用重新加载提供了一个临时解决方案。 https://github.com/ng-bootstrap/ng-bootstrap/issues/1909

https://stackblitz.com/edit/ng-bootstrap-tab-set-issues-fj8koq?file=app/app.component.ts