我目前使用的方法类似于在演示站点http://valor-software.com/ngx-bootstrap/index-bs4.html#/tabs#dynamic
我的最终目标是为每条记录打开标签。有些记录可能有 1 个选项卡，有些记录可能有 10 个选项卡。似乎该对象显示了正确数量的选项卡，但选项卡并未从 DOM 中删除。
这是我的 HTML 页面的片段：
<tab *ngFor="let tabz of tabs; let i = index;"
[heading]="tabz.title"
[active]="tabz.active"
(select)="tabz.active = true"
(deselect)="tabz.active = false"
[disabled]="tabz.disabled"
[removable]="tabz.removable"
(removed)="removeTabHandler(tabz)"
[customClass]="tabz.customClass">
以下是我的 TS 页面的一些片段：
this.subscription = this.route.params.subscribe(
(params: any) => {
this.currentSelectedSite = params['id'];
this.leaseTerminationService.fetchLeaseTerminationSite(this.currentSelectedSite)
.subscribe(
data => {
const myArray = [];
for (let key in data) {
myArray.push(data[key]);
}
this.selectedLeaseTermination = myArray;
}
)
//Make a call to get the SITE specific data for the selected site
this.sitesService.getSite(this.currentSelectedSite)
.subscribe(
data => {
const myArray = [];
for (let key in data) {
myArray.push(data[key]);
}
this.selectedSiteSite = myArray;
}
)
//Make a call to get the LEASE specific data for the selected site
this.leasesService.getLease(this.currentSelectedSite)
.subscribe(
data => {
const myArray = [];
for (let key in data) {
myArray.push(data[key]);
}
this.selectedSiteLease = myArray;
}
)
//Make a call to get the LEASE specific data for the selected site
this.leasesService.getLeasesList(this.currentSelectedSite)
.subscribe(
data => {
const myArray = [];
for (let key in data) {
myArray.push(data[key]);
}
this.selectedSiteLeases = myArray;
// Set the count of tabs
this.tabsCount = this.selectedSiteLeases.length;
this.tabs = [];
console.log('getLeasesList called');
this.createTabs(this.selectedSiteLeases);
// Set the first tab as the defaults after the tabs have been defined
this.setActiveTab(0);
}
)
}
)
}
public createTabs(leases) {
this.tabs = [];
for (let key in leases) {
this.tabs.push(
{title: 'Lease ' + this.selectedSiteLeases[key].lease_id
, content: this.selectedSiteLeases[key].renewal_latest_date }
);
}
}
我在这里有什么明显的遗漏吗？任何想法为什么这可能不会删除页面上显示的标签？实际的选项卡仍在显示，但如果您单击它，则其中没有内容。在页面重新加载时，仅显示正确的选项卡，或者如果您转到不同的路线并返回。
这是我正在使用的一些工具的简要介绍。
- 角 4.1
- 引导程序 v4
- ngx-bootstrap 1.6.6
- 字体真棒