Как отобразить содержимое динамической вкладки в Angular с помощью ng-bootstrap - PullRequest
Новая
       7

Как отобразить содержимое динамической вкладки в Angular с помощью ng-bootstrap

0 голосов
/ 16 января 2019

Что я пытаюсь сделать?

Я отправляю запрос POST к API и, используя ответ, динамически создаю вкладки. Вот код для следующего: 

<div id="wrapper" class="container-fluid">
<ngb-tabset class="nav-fill">
<ngb-tab *ngFor="let category of categories" [title]="category.name" [id]="category.id">
      <ng-template ngbTabContent>
        <!-- Here we will have some content.
    This content comes from the API which takes category.id as a param -->
      </ng-template>
    </ngb-tab>
</ngb-tabset>
</div>

Надеюсь, код понятен.

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу понять, как получить контент. Потому что мне нужен category.id для получения контента, и каким-то образом мне нужно прикрепить метод, который берет category.id и выполняет запрос и получает данные.

Таким образом, пользователь нажимает на одну вкладку, и отображается некоторый контент, а когда он нажимает на другие вкладки, отображается другой набор контента, который все получает через API.

Я нашел один способ сделать это. OnNgInit () Я могу получить все необходимые данные, а затем при запуске * ngFor я буду использовать ссылку id для получения содержимого. Но я искал более надежный способ сделать это

1 Ответ

0 голосов
/ 16 января 2019

Вместо вызова всех данных содержимого во время метода ngOninit (), который иногда никогда не используется, вы можете прикрепить обработчик событий (ngClick) к вашей вкладке ngb следующим образом: 

<ngb-tab *ngFor="let category of categories" (ngClick)="selectedTab(category.id)" [title]="category.name" [id]="category.id">
<ng-template ngbTabContent>
    <!-- Here we will have some content.
This content comes from the API which takes category.id as a param -->
  </ng-template>
</ngb-tab>

и в вашем компоненте вы можете вызвать метод rest для извлечения содержимого для вкладки: 

@Component({...})
export class someComponent{
/* constructors private members bla bla */

  selectedTab(id:int):any{
//call your service which makes http call to get content for your selected tab
    getContent(id);
   }
}

надеюсь, что ответит на ваш вопрос!

...