用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 
     } 
    ]; 
} 

}