Question

我在带有打字稿和ag-grid: "5.0.3"以及angular: "1.5.7"的项目中使用angular-ui-router: "0.3.1"。

我有一个包含多个标签的视图，如下所示：

<div class="row">
   <div class="col-md-3">
      <uib-tabset justified="true" active="ctrl.activeTabIndex">
         <uib-tab index="$index" ng-repeat="tab in ctrl.tabs" ng-hide="tab.hide" heading="{{tab.heading}}" classes="my-tab"
                         disable="tab.disabled" select="ctrl.go(tab)">
                </uib-tab>
            </uib-tabset>
        </div>
    </div>
<div class="panel-body row">
    <div class="row">
       <div class="col-md-12">
           <div class="tabsView" ui-view="tabsView"></div>
       </div>
    </div>
</div>

其中一些tabsView包含<div ag-grid="ctrl.gridThreeOptions" class="ag-blue"></div>，其选项在加载主视图时创建。

我发现的问题是，如果我刷新页面或尝试直接加载包含网格的其中一个标签，网格将永远停留在Loading...，直到我点击另一个标签然后转到回到同一个标签。见下图：

在呈现标签视图时，网格似乎尚未就绪。我还注意到，如果我刷新该选项卡上的浏览器（在该状态下），网格选项＆＃39;永远不会触发onGridReady事件。因此网格永远不会准备好。

我在主视图的控制器中有类似的东西，它可以加载所有网格＆＃39;选项。

private init(): void {
   this.remoteService.getRemoteJsonIncludingAllTablesToDisplay()
         .then((jsonObject: any) => {
              // here I create all the gridOptions for the different tabs with the jsonObject's arrays received
              this.gridOneOptions = gridService.getGridOneOptions();
              this.gridTwoOptions = gridService.getGridTwoOptions();
              this.gridThreeOptions = gridService.getGridThreeOptions();
              this.tabs = this.getTabs(); //gets the array of ITab
              //now I load whatever tab the browser wanted to view:
              this.activeTabIndex = this.getActiveTabIndex();
          });
}

private getActiveTabIndex(): number {
    for (let index = 0; index < this.tabs.length; index++) {
         let tab: any = this.tabs[index];
         if (this.active(tab)) {
             return index;
         }
    }
    return 0; // by default go to first tab
}

我有一个解决方法但看起来很难看。现在我要做的是在导航到所需的选项卡之前设置超时，然后我应用$ scope（似乎需要加载新的选项卡视图）。像这样：

this.tabs = this.getTabs(); //gets the array of ITab
//now I load whatever tab the browser wanted to view:
let tabToGo: number = this.getActiveTabIndex();
setTimeout(() => {
     this.activeTabIndex = tabToGo
     this.$scope.$apply();
}, 200);

有人知道为什么Loading...上的网格可能会发生？

Answer 1

我遇到了类似的问题，在bootstrap模态对话框中使用了ag-grid。最后，使用ng-if解决了我的问题。所以你可以试试这个：

<div ag-grid="ctrl.gridThreeOptions" ng-if="ctrl.gridThreeOptions != null" class="ag-blue"></div>

重新加载角度选项卡时，agGrid从未准备好

1 个答案: