我正在使用 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)">
×
</span>
</ng-template>
<ng-template ngbTabContent>Content of {{ tab.title }}</ng-template>
</ngb-tab>
</ngb-tabset>
但是这个非常简单的模板有 3 个问题:
- 添加多个标签时,其内容显示在下方 另一个。
- 无法在选项卡之间切换。
- 在示例中单击关闭 (x) 按钮时,应用会重新加载。
这里是 Stackblitz .另外,我已经装箱了一个 issue在 Github 上。
我是不是做错了什么,或者这是 ng-bootstrap
中缺少的功能?
最佳答案
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
关于javascript - ngb-tabset 和动态创建的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50164577/