ngx-bootstrap 标签没有被删除

Question

我目前使用的方法与在演示站点上找到的方法类似 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 }
       );
     }
   }

有什么明显的我在这里遗漏的吗？任何想法为什么这可能不会删除页面上显示的选项卡？实际选项卡仍在显示，但如果您单击它，则其中没有内容。在页面重新加载时仅显示正确的选项卡，或者如果您转到不同的路线并返回。

以下是我正在使用的一些工具的简要介绍。

Angular 4.1
Bootstrap v4
ngx-bootstrap 1.6.6
字体很棒

Answer 1

我找不到适合 1.6.6 版本的任何好的解决方案。

此错误已在 v1.7+ 中修复。

我已经尝试过 1.8.1，它工作正常。

你可以看看here

ngx-bootstrap 标签没有被删除

ngx-bootstrap tabs not being removed

angular

bootstrap-4

ngx-bootstrap