Angular Slickgrid 예제 24에서 Angular slickgrid 및 ngfor를 사용하여 동적으로 탭 만들기 (Dynamically create tabs with Angular slickgrid and ngfor in Angular Slickgrid Example 24)

문제 설명

Angular Slickgrid 예제 24에서 Angular slickgrid 및 ngfor를 사용하여 동적으로 탭 만들기 (Dynamically create tabs with Angular slickgrid and ngfor in Angular Slickgrid Example 24)

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개의 탭을 가져오는 대신 각 탭에 단일 grid, 동일한 내용을 가진 3개의 탭을 얻었습니다. 각 탭에는 3개의 그리드가 모두 포함되어 있습니다.

잘못이 어디 있습니까? 감사합니다

참조 솔루션

방법 1:

As proposed by Raphael I replaced tabset with the Nav directives.

After installing ng‑bootstrap according to the instructions https://ng‑bootstrap.github.io/#/getting‑started#installation

the following ng‑bootstrap‑example based code in the template did the job

<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>

Thanks Raphael and Ghislain for your comments!

(by user15730368、user15730368)

참조 문서

1. Dynamically create tabs with Angular slickgrid and ngfor in Angular Slickgrid Example 24 (CC BY‑SA 2.5/3.0/4.0)