Angular2在渲染後執行方法（Bootgrid）

我嘗試將jQuery Bootgrid與Angular 2一起使用。問題是Bootgrid檢查現有表，但是使用angular2我的數據基於asyncrone源。Angular2在渲染後執行方法（Bootgrid）

我以後嘗試初始化網格，當數據在控制器中設置沒有運氣。我認爲網格必須在DOM被angular2更新之後初始化。是否有這樣的「組件後更新」 - 事件？還是其他想法？

這裏我的代碼：

records: Record[] = [] 
 
    grid: any 
 

 
    ngOnInit() { 
 
     this._recordService.getAllRecords().subscribe(
 
      data=> { this.records = data }, 
 
      error=> { alert(error) } 
 
     ) 
 
      .add(() => setTimeout(() => this.initGrid(), 50)); 
 
    } 
 

 

 
    initGrid() { 
 
     this.grid = jQuery("#grid-basic"); 
 
     var ref = this; 
 
     this.grid.bootgrid({ 
 
      ...config Stuff... 
 

 
     }) 
 
    }

，將工作只有醜「的setTimeout」的原因。如果沒有超時，表格將顯示「無數據」（我的bootgrid信息標籤的記錄數正確更新）

感謝您的任何想法！

來源

2016-01-20 Hemant Desusa

你不能只是環繞你initGrid函數調用

gridData.service.getData().then((data) => { 
    initGrid(data); 
});

來源

2016-01-20 15:51:47 inoabrian

這是行不通的。請記住，表格的數據是加載的異步。當事件被觸發時，該表爲空>然後bootgrid將初始化空表>然後服務中的數據準備就緒......對於bootgrid來說太遲了 –

還有就是AfterViewChecked事件，該事件被觸發每次DOM被更新時的承諾。這可以通過實現AfterViewChecked Typescript接口來接收，這意味着您將不得不添加方法ngAfterViewChecked()。

ngOnInit() { 
    this._recordService.getAllRecords().subscribe(
     data=> { this.records = data }, 
     error=> { alert(error) } 
    ) 
} 

ngAfterViewChecked() { 
    if (this.records.length > 0 && !this.isGridInitialized) this.initGrid(); 
} 

initGrid() { 
    this.isGridInitialized = true; 
    this.grid = jQuery("#grid-basic"); 

    var ref = this; 
    this.grid.bootgrid({ 
     ...config Stuff... 

    }) 
}

這裏是AfterViewChecked一個工作演示：http://plnkr.co/edit/Edkba0Stgn95Whwz4vqq?p=preview。該演示顯示ngAfterViewChecked方法在Observable完成後調用（延遲5秒）。

AfterViewChecked是Angular2 lifecycle hooks之一。

來源

2016-01-20 20:55:23

Angular2在渲染後執行方法（Bootgrid）

回答

相關問題