agGrid никогда не готов при перезагрузке углового язычка

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..., пока я не нажму на другую вкладку и не вернусь к та же вкладка. Смотрите изображение ниже:

Это как если сетка не была готова к тому времени, времени вид вкладки визуализируется. Я также заметил, что если я обновляю браузер на этой вкладке (в этом состоянии), событие сетки «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 
} 

У меня есть обходное решение, но кажется уродливым. На данный момент я должен установить тайм-аут перед тем, как перейти на нужную вкладку, а затем применить масштаб $ (это кажется необходимым для загрузки новой вкладки). Что-то вроде этого:

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

У меня была аналогичная проблема, используя ag-сетку в модальном диалоге загрузки. В конце концов, используя ng-if, я решил свои проблемы. Поэтому вы можете попробовать следующее:

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