光滑的网格不以角度显示选项卡内的数据答案

【问题标题】：Slick Grid not displaying data inside tab in angular光滑的网格不以角度显示选项卡内的数据
【发布时间】：2019-06-13 10:56:33
【问题描述】：

我正在使用 Angular Slickgrid 在选项卡（多个选项卡）内显示数据。我正在从服务获取数据，但表格未显示任何数据。很少有标签显示数据，但不显示表格标题

代码如下：

 Parent File

   <div class="tab-pane fade" id="h2">
      <div class="row">
        <article class="col-sm-12">
            <sa-users-list [id]="gridUsersList"></sa-users-list>               
        </article>
      </div>
    </div>

     <div class="tab-pane fade" id="h3">
      <div class="row">
        <article class="col-sm-12">
          <sa-facility-list [id]="gridFacility"></sa-facility-list>             
        </article>
      </div>
    </div>

用户列表文件

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

设施列表

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

【问题讨论】：

标签： angular slickgrid

【解决方案1】：

只需检查您是否使用this repo - MLeibman 分支在初始化隐藏网格时遇到问题。参见例如here

这不是 Angular 存储库，但这些问题可能仍然相关。

【讨论】：

【解决方案2】：

SlickGrid 不适用于隐藏的 DOM 元素，在更改选项卡后，您应该确保调用网格调整大小，第一个选项卡可能不需要，但所有后续选项卡都需要。

你可以看到现场演示here，也就是我最近添加的新Example 24。

例如ngx-bootstrap，注意对(selectTab)="resizeGrid2()"的调用

<div>
    <tabset>
      <tab heading="Javascript" id="javascript">
        <h4>Grid 1 - Load Local Data</h4>
        <angular-slickgrid gridId="grid1"
          [columnDefinitions]="columnDefinitions1"
          [gridOptions]="gridOptions1"
          [dataset]="dataset1">
        </angular-slickgrid>
      </tab>
      <tab heading="Http-Client" (selectTab)="resizeGrid2()">
        <h4>Grid 2 - Load a JSON dataset through Http-Client</h4>
        <angular-slickgrid gridId="grid2"
          [columnDefinitions]="columnDefinitions2"
          [gridOptions]="gridOptions2"
          [dataset]="dataset2"
          (onAngularGridCreated)="angularGrid2Ready($event)">
        </angular-slickgrid>
      </tab>
    </tabset>
  </div>

组件（演示组件link）

export class MyComponent implements OnInit {

  angularGrid2: AngularGridInstance;
  columnDefinitions1: Column[];
  columnDefinitions2: Column[];
  gridOptions1: GridOption;
  gridOptions2: GridOption;
  dataset1: any[];
  dataset2: any[];


  angularGrid2Ready(angularGrid: AngularGridInstance) {
    this.angularGrid2 = angularGrid;
  }

  resizeGrid2() {
    this.angularGrid2.resizerService.resizeGrid();
  }

请注意，我是 Angular-Slickgrid 的作者，它使用 6pac/SlickGrid 分支（Ben 在之前的回答中指出了这一点）。

另一个重要的事情是确保你所有的网格都有唯一的gridId，这可能是你的问题。所以你可能还想看看另一个相关的SO，因为它也适用于标签

【讨论】：