我需要一个页面的标签类似于Example 24在角度Slickgrid，其中每个标签的内容是网格。选项卡的数量可以变化，因此我需要将其设置为动态的。

因此，我使用这个示例作为基础来找出该做什么。首先我修改了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个网格。

错误在哪里？谢谢

转载请注明出处:http://www.zhongtian365.com/article/20230511/2327828.html

随机推荐

  1. 在Angular中实现一个级联效果的下拉框的示例代码

    实现一个具有级联效果的下拉搜索框，实现的结果如下图所示 我们主要通过这个组件，来学习一些细微的逻辑，比如: 如何计算input框内文字的长度； 如何获取光标的位置；如何实现滚动条随着上下键盘的按动进行移动...... 具体需求如下 ...

  2. Angular (npm)在angular-devkit中的现有目录前面加上下划线，并给出no directory“(ENOENT)错误

    编译我的Angular Electron应用程序会给出Error: ENOENT: no such file or directory, open node_modules/@angular-devkit/build-angular/src...

  3. 在Angular控制器中使用下划线

    如何在angularjs控制器中使用下划线库？ 在此文章上：AngularJS limitTo的最后2条记录 建议有人为rootScope分配一个_变量，以便该库可用于应用程序中的所有范围。 但我不清楚该在哪里做。我的意思是应该在应...

  4. 在angular 8中使用ngModel和ngModelOption进行表单验证

    我正在使用angular 8与formGroup和formController进行验证，它在反应式表单和模板驱动表单中工作得很好。然而，我试图在angular 8中使用带有ngModelOptions“属性的ngModel”(它是一个动态生...

  5. 在Angular中使用动态输入和鼠标移动时不显示SVG标题工具提示

    给定以下Angular应用程序，SVG title将显示为第一个HelloComponent的rect的工具提示(悬停时)，而不是其他的。如果您删除(mousemove)属性，则会显示所有工具提示。这里发生了什么?如何修复？https://...

  6. 在Angular 6中生成Services时，使用Injectable装饰器提供ProvideIn的目的是什么？

    在Angular CLI中生成服务时，它将为Injectable装饰器添加带有“提供的”属性且默认值为“ root”的额外元数据。 @Injectable({ providedIn: 'root', }) ProvideIn到底做...

  7. 在angular中使用ng-repeat和push服务的绑定元素

    您好，我正在使用离子框架。我有一个关于使用push和ng-repeat元素从JS绑定元素的问题。我在HTML上看不到绑定值，不确定这是不是正确的实现方式。此应用程序的概念:使用Google places search API for JS查...

  8. 在 Angular中 使用 Lodash 的方法

    如何Lodash 是 JavaScript 很有名的 package，尤其對於處理 array 很有一套，Angular 該如何使用 lodash 呢 這也可以視為在 Angular 使用傳統 JavaScript package 的 ...

  9. 在angular 6中使用trackBy和ngFor可以提高性能吗？

    在angular 6中结合使用trackBy和ngFor提高性能 app-analysis-item *ngFor=let element of analyses [analysis]=elemen...

  10. 在angular中存储和使用API的最佳方式是什么

    我想把所有的API存储在一个地方，即在JSON文件中，我想在我的应用程序中使用那个JSON文件。i)保存JSON文件的最佳位置。ii)如何使用Type脚本文件中的URL