ngb-tabset & динамически созданные вкладки - PullRequest
Новая
       27

ngb-tabset & динамически созданные вкладки

0 голосов
/ 04 мая 2018

Я использую Angular 5.2.10 (также протестирован в 5.0.2) + Bootstrap 4.1.1 (также протестирован в 4.0.0) + ng-bootstrap 1.1.2 и пытаюсь заставить tab-set работать с динамически созданными вкладки.

Я связываю ngb-tab s с массивом через *ngFor: 

<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)">
                &times;
            </span>
        </ng-template>

        <ng-template ngbTabContent>Content of {{ tab.title }}</ng-template>

    </ngb-tab>
</ngb-tabset>

Но у этого довольно простого шаблона есть 3 проблемы:

  1. При добавлении нескольких вкладок их содержимое отображается одной ниже другой.
  2. Невозможно переключаться между вкладками.
  3. При нажатии кнопки Закрыть (x) в примере приложение перезагружается.

Вот Stackblitz . Кроме того, я написал выпуск на Github.

Я что-то не так делаю или в ng-bootstrap еще нет функции?

1 Ответ

0 голосов
/ 04 мая 2018

Идентификатор устанавливается в строку "tab.id". Вместо этого я думаю, что это должно быть [attr.id]="tab.id", которое установит атрибут id в значение, содержащееся в tab.id

Похоже, существует открытая проблема в репозитории ng-bootstrap, которая имеет временное решение для перезагрузки приложения. https://github.com/ng-bootstrap/ng-bootstrap/issues/1909

https://stackblitz.com/edit/ng-bootstrap-tab-set-issues-fj8koq?file=app/app.component.ts

...