Angular slickgrid 未在动态选项卡内显示（ngx-bootstrap 选项卡集）答案

【问题标题】：Angular slickgrid not displaying inside dynamic tab(ngx-bootstrap tabset)Angular slickgrid 未在动态选项卡内显示（ngx-bootstrap 选项卡集）
【发布时间】：2019-05-15 11:51:56
【问题描述】：

我正在使用 Angular Slickgrid 在选项卡中显示表格数据。我有一个 html 页面，其中两个选项卡是静态的，也正确显示数据，其他选项卡是从最后的专用选项卡动态创建的，这基本上是从输入构建查询，当您保存选项卡时，它将创建一个新选项卡，追加它在第二个选项卡之后并将查询发送到新生成的选项卡，该选项卡将从具有给定查询的服务中获取记录。我成功地从服务中获取数据，但表格没有显示任何内容，甚至没有显示表格标题。代码如下：

父 html：

   <tabset #tabsetId>
    <tab heading="heading1" id="1" (selectTab)="onSelectTab($event)">
       <child-component [query]="query"></child-component>
    </tab>

    <tab heading="heading2" id="2" (selectTab)="onSelectTab($event)">
       <child-component [query]="query"></child-component>
    </tab>

    <!--below tab is not displaying any data -->
    <tab id="3" *ngFor="let tabz of tabs" [heading]="tabz.title" [active]="tabz.active"
    (selectTab)="onSelectTab($event)" (deselect)="tabz.active = false" [disabled]="tabz.disabled"
    [removable]="tabz.removable" (removed)="removeTabHandler(tabz)">
    <child-component [query]="query"></child-component>
    </tab>
</tabset>
    <!-- Note: Child component is having angular slick grid code -->

子代码html：

<div style="height:auto;width:750px">
   <angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
   [dataset]="responseList" (onAngularGridCreated)="angularGridReady($event)">
   </angular-slickgrid>
</div>

子组件：

    export class ChildComponent {
      @Input() query: Array<any>;
      ngOnInit() {
        this.columnDefinitions = [
          { col- 1},{ col - 2 }
       ]
    this.gridOptions = {
      enableAutoResize: true,
      enableCellNavigation: true,
      enableFiltering: true,
      forceFitColumns: true
    }
    this.fetchData(this.query);
    }

    angularGridReady(angularGrid: AngularGridInstance) {
     console.log('slickgrid created');
      }

      private fetchData(query: Array<any>) {
        // Clearing response list
        this.responseList = [];
          this.service.fetchDataByQuery(query).subscribe(responseList => {
          this.responseList = responseList;
          });

      }
    }

【问题讨论】：

标签： angular slickgrid

【解决方案1】：

在您的 child-component.html 中，我可以看到您每次都将相同的 gridId 传递给 angular-slickgrid 标签。相反，您可以每次从父组件传递一个唯一的 Id 作为角度输入。

最后，您的孩子和父母的 htmls sn-ps 如下所示。

父 html：

<child-component [id]="id" [query]="query"></child-component>

子 html：

<angular-slickgrid [gridId]="id" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
   [dataset]="responseList" (onAngularGridCreated)="angularGridReady($event)">
   </angular-slickgrid>

编码愉快。

【讨论】：