未删除 ngx-bootstrap 选项卡答案

【问题标题】：ngx-bootstrap tabs not being removed未删除 ngx-bootstrap 选项卡
【发布时间】：2017-05-18 20:46:44
【问题描述】：

我目前使用的方法类似于在演示站点 http://valor-software.com/ngx-bootstrap/index-bs4.html#/tabs#dynamic 上找到的方法

我的最终目标是为每条记录打开标签。有些记录可能有 1 个选项卡，有些记录可能有 10 个选项卡。似乎该对象显示了正确数量的选项卡，但选项卡并未从 DOM 中删除。

这是我的 HTML 页面的 sn-p：

<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 页面的一些 sn-ps：

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
引导程序 v4
ngx-bootstrap 1.6.6
字体真棒

【问题讨论】：

在另一个说明中，我的数组似乎正在删除项目，但是当我在 Augury 中查看数组时，它确实注意到从数组中删除任何项目?????

标签： angular bootstrap-4 ngx-bootstrap

【解决方案1】：

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

此错误现在已针对 v1.7+ 修复。

我已经尝试过 1.8.1 并且工作正常。

您可以查看here

【讨论】：