时间戳

首页 > 解决方案 > 在 Angular Slickgrid 示例 24 中使用 Angular slickgrid 和 ngfor 动态创建选项卡

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

问题描述

我需要一个带有类似于Angular Slickgrid 中的示例 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 个网格。

错误在哪里？谢谢

标签： angulartabsngforangular-slickgrid

解决方案

正如 Raphael 所提议的，我将 tabset 替换为 Nav 指令。

按照说明安装 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 的评论！

推荐阅读