javascript - 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-tab 绑定(bind)到一个数组:

<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 .另外，我已经装箱了一个 issue在 Github 上。

我是不是做错了什么，或者这是 ng-bootstrap 中缺少的功能？

Answer 1

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

中保存的值

在 ng-bootstrap 存储库上似乎有一个 Unresolved 问题，它有一个应用程序重新加载的临时解决方案。 https://github.com/ng-bootstrap/ng-bootstrap/issues/1909

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