Question

我正在使用Angular 5.2.10（也在5.0.2中测试）+ Bootstrap 4.1.1（也在4.0.0中测试）+ ng-bootstrap 1.1.2并尝试使tab-set使用动态创建标签。

我通过ngb-tab将*ngFor绑定到数组：

<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）按钮时，应用程序将重新加载。

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

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

Answer 1

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

看起来ng-bootstrap repo上有一个开放的问题，它有一个临时解决方案来重新加载应用程序。 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＆amp;动态创建标签

1 个答案: