Question

我正在使用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>

Answer 1

只需检查您正在使用Scheme-MLeibman分支就存在初始化隐藏网格的问题。例如参见this repo

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

Answer 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，因为它也用于制表符

光滑的网格不在角的选项卡内显示数据

2 个答案: