Question

我要做什么？

我向API发送POST请求，并使用响应动态创建标签。这是以下代码：

@ViewChild(MatSort) set content(sort: MatSort) {
    this.dataSource.sort = sort;
}

我希望代码清楚。

我面临的问题是我无法弄清楚如何获取内容。因为我需要category.id来获取内容，所以我必须以某种方式附加一个采用category.id并执行请求并获取数据的方法。

因此，用户单击一个选项卡，将显示一些内容，而当他单击其他选项卡时，将显示另一组内容，这些内容都是通过API获得的。

我找到了一种方法。 OnNgInit（）我可以获取所需的所有数据，然后在* ngFor运行时，我将使用id引用获取内容。但我一直在寻找一种更强大的方法来做到这一点

Answer 1

您可以将（ngClick）事件处理程序附加到ngb选项卡，而不是在有时从未使用过的ngOninit（）方法期间调用所有内容数据：

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

希望能回答您的问题！

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

1 个答案: