👻
【ag-grid】非同期で取得したデータをrowDataに反映させる
gridApiのapplyTransactionで追加する
もしくはsetGridOptionで更新する。
ngOnInitでgridOptionsを初期化および非同期でデータ取得。
onGridReadyでgridApiをセット。
※データ取得完了とonGridReadyのどちらが先になるかはタイミングによって変わりそう。
データ取得を遅延させる or gridApiがセットされるのを待つべき？
ts
private rowData: object[] = [];
// 初期表示
async ngOnInit() {
console.log('[ngOnInit]');
this.gridOptions = {
"columnDefs": this.columnDefs,
"rowSelection": this.rowSelection,
"onGridReady": (event) => this.onGridReady(event),
}
await this.getRowData()
.then((result) => {
console.log('[getRowData] then', result);
this.rowData = result;
if (this.gridApi) {
this.gridApi.applyTransaction({ add: this.rowData });
}
})
.catch((error) => {
console.error("Failed to load data", error);
})
.finally(() => {
console.log('[getRowData] finally');
});
}
onGridReady(params: GridReadyEvent) {
console.log("[onGridReady]");
this.gridApi = params.api;
if (this.rowData.length > 0) {
console.log("[onGridReady]applyTransaction");
this.gridApi.applyTransaction({ add: this.rowData });
}
}
html
<ag-grid-angular class="ag-theme-quartz" style="height: 200px;"
[gridOptions]="gridOptions" />
参考
Discussion