角度タブを再ロードするときにagGridが準備完了しない

Question

とangular-ui-router: "0.3.1"のプロジェクトでag-grid: "5.0.3"を使用しています。

私はこのようなもので複数のタブ付きビューを持っている：

<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>。

私が見つけている問題は、ページをリフレッシュするかグリッドを含むタブの1つを直接ロードしようとしたときに、グリッドが永久にスタックしてしまうことです。Loading...別のタブをクリックして、同じタブ。下の画像を参照してください：

グリッドは、時間タブビューがレンダリングされる時までに準備ができていなかったかのようにです。 また、その状態でそのタブのブラウザを更新すると、グリッドオプションのonGridReadyイベントがトリガされないことに気付きました。だからグリッドは決して準備ができていない。

メインビューのコントローラに、グリッドのオプションをすべてロードするようなものがあります。

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 
} 

私は回避策がありますが、醜いようです。今のところ私がやることは、目的のタブに移動する前にタイムアウトを設定し、次に$スコープを適用することです（新しいタブビューが読み込まれる必要があるようです）。このような何か：Loading...に貼り付けグリッドが起こるかもしれない理由

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); 

誰もが知っていますか？

Answer 1

ブートストラップモーダルダイアログでag-gridを使用して同様の問題が発生しました。最後に、ng-ifを使用して私の問題を解決しました。だからあなたはこれを試すことができます：

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