平滑网格不在angular中的选项卡内显示数据

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

只是检查一下你是否在使用this repo -- MLeibman分支在初始化隐藏网格时有问题。有关示例here，请参阅

这不是一个角度存储库，但这些问题可能仍然相关。

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 fork (本在前面的回答中指出)。

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