如何使用ng引导在Angular中显示动态选项卡内容

我想做什么？

我向API发送POST请求，并使用响应动态创建选项卡。 以下是以下各项的代码：

<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引用获取内容。但我一直在寻找一种更健壮的方法来执行此操作，而不是在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>

---

希望这能回答你的问题

你能在@programoholic中共享html吗？这是我无法理解的。它是根据单击哪个选项卡从GET请求加载的。为简单起见，假设只有一个变量bindingthere is select event或focus event is the。。您可以在此类事件上调用方法来获取数据，一旦完成，就可以指定值，如

category.content=result

；在html

{{category？.content}

中，由于某种原因，ngClick事件没有被触发。刚拿到文件。在ngb tabset元素上使用（tabChange）方法调用动态选项卡内容RESTAPI。有关更多信息，请参阅

@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);
   }
}