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 个问题：

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

这是 Github 上的 Stackblitz. Also, I've crated an 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

ngb-tabset 和动态创建的标签

ngb-tabset & dynamically created tabs

javascript

twitter-bootstrap

typescript

ng-bootstrap

angular