вкладки ngx-bootstrap не удаляются

В настоящее время я использую метод, аналогичный тому, что можно найти на демонстрационном сайте 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">

Вот несколько фрагментов моей страницы ТС:

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-бутстрап 1.6.6
• потрясающий шрифт