在 Angular Slickgrid 示例 24 中使用 Angular slickgrid 和 ngfor 动态创建选项卡

如何解决在 Angular Slickgrid 示例 24 中使用 Angular slickgrid 和 ngfor 动态创建选项卡

我需要一个带有类似于 Angular Slickgrid 中的 Example 24 选项卡的页面，其中每个选项卡的内容都是一个网格。选项卡的数量可能会有所不同，因此我需要使其动态化。

因此，我以这个例子为基础来找出要做什么。首先我修改了 ngOnInit:

ngOnInit(): void {
  this.defineGrid1();
  this.defineGrid2();

  // mock some data (different in each dataset)
  this.dataset1 = this.mockData();

  // load data with Http-Client
 this.http.get((URL_CUSTOMERS)).subscribe((data: any[]) => this.dataset2 = data);

 this.gridOptions3 = this.gridOptions1;
 this.columnDefinitions3 = this.columnDefinitions1;
 this.dataset3 = this.mockData();

  this.paras = [
       {tab:"tab1x",grName:"grid1",cD: this.columnDefinitions1,gO: this.gridOptions1,dS: this.dataset1},{tab:"tab2x",grName:"grid2",cD: this.columnDefinitions2,gO: this.gridOptions2,dS: this.dataset2},{tab:"tab3x",grName:"grid3",cD: this.columnDefinitions3,gO: this.gridOptions3,dS: this.dataset3}
  ];
}

在模板中我使用了带有 *ngFor 的对象：

<tabset>
  <div *ngFor="let obj of paras; let i = index">
    <tab [heading]="obj.grName" [id]="obj.tab">
      <h4>Grid {{ i + 1 }} - Load Local Data</h4>
      <angular-slickgrid
        [gridId]="obj.grName"
        [columnDefinitions]="obj.cD"
        [gridOptions]="obj.gO"
        [dataset]="obj.dS"
      >
      </angular-slickgrid>
    </tab>
  </div>
</tabset>

不是获得 3 个标签，每个标签包含一个网格， 我得到了 3 个内容相同的标签，每个标签都包含所有 3 个网格。

错在哪里？ 谢谢

解决方法

按照 Raphael 的建议，我用 Nav 指令替换了 tabset。

按照说明安装ng-bootstrap后 https://ng-bootstrap.github.io/#/getting-started#installation

模板中以下基于 ng-bootstrap-example 的代码完成了这项工作

<ul ngbNav #nav="ngbNav" class="nav-tabs">
    <ng-container ngbNavItem *ngFor="let obj of paras; let i = index">
        <a ngbNavLink>{{obj.grName}}</a>
        <ng-template ngbNavContent>
        <angular-slickgrid [gridId]="obj.grName"
            [columnDefinitions]="obj.cD"
            [gridOptions]="obj.gO"
            [dataset]="obj.dS">
        </angular-slickgrid>
        {{obj.grName}}
      </ng-template>
    </ng-container>
</ul>
<div [ngbNavOutlet]="nav" class="mt-2"></div>

感谢 Raphael 和 Ghislain 的评论！