用angular2觀察綁定ag-grid

Question

我試圖在組件加載時將數據加載到ag-grid。 結合example on ag-grid github和answer to this question我有這個ngOnInit我的組件：

ngOnInit(): void { 
    this.promisesService.getPromises() 
     .subscribe((s: Promise[]) => { 
      console.log('got response:', s); 

      this.gridOptions = { 
       enableSorting: true, 
       rowData: this.createRowData(), 
       columnDefs: this.createColumnDefs(), 
       onGridReady:() => { 
        this.gridOptions.api.sizeColumnsToFit(); 
        console.log('ag-grid ready'); 
       } 
      }; 

      console.log('options set:', this.gridOptions); 
     }); 
} 

網格粘貼在「載入中...」沒有錯誤消息。 gridOptions設置正確，它的rowData包含我期待看到的所有數據。 雖然onGridReady從未被觸發。

如果我提出的選項的設置外認購正常工作：

ngOnInit(): void { 
    this.promisesService.getPromises() 
     .subscribe((s: Promise[]) => { 
      console.log('got response:', s); 

      console.log('options set:', this.gridOptions); 
     }); 

    this.gridOptions = { 
     enableSorting: true, 
     rowData: this.createRowData(), 
     columnDefs: this.createColumnDefs(), 
     onGridReady:() => { 
      this.gridOptions.api.sizeColumnsToFit(); 
      console.log('ag-grid ready'); 
     } 
    }; 


} 

在模板我只設置選項：

<ag-grid-ng2 #agGrid style="width: 100%; height: 200px;" class="ag-fresh" [gridOptions]="gridOptions"></ag-grid-ng2> 

我已經試過代碼移入構造函數並在模板中設置rowData，但它沒有幫助。

我錯過了什麼？

感謝

Answer 1

因爲如果我設置在構造函數中的選項，留在初始化它工作正常的數據讀取某些原因。任何人都知道的原因，請讓我知道：

export class PromisesListComponent { 
private gridOptions: GridOptions; 
promises: Promise[]; 

constructor(private promisesService: PromisesService) { 
    this.gridOptions = { 
     rowData: this.promises, 
     columnDefs: this.createColumnDefs(), 
     enableColResize: true, 
     enableSorting: true, 
     enableFilter: true, 
     onGridReady:() => { 
      this.gridOptions.api.sizeColumnsToFit(); 
     } 
    } 
} 

ngOnInit(): void { 
    this.promisesService.getPromises() 
     .subscribe((response: Promise[]) => { 
      this.promises = response; 
     }); 
} 

private createColumnDefs() { 
    return [ 
     { 
      headerName: "Agreement Code", 
      field: "AgreementCode", 
      width: 200 
     } 
    ]; 
} 

}