如何使用 ag-grid 根据 API 响应动态显示列

Question

下面是 ag grid 的代码及其在"this.gridApi.setColumnDefs(this.columnDefs("上的错误，有人可以指导如何解决这个问题：

<ag-grid-angular " 
class="ag-theme-balham"
#agGrid
[columnDefs]="columnDefs"
id="newGrid"
[enableSorting]="true"
[enableFilter]="true"
[modules]="modules"
[paginationAutoPageSize]="true"
[rowData]="rowData"
[defaultColDef]="defaultColDef"
(gridReady)="onGridReady($event)"
[pagination]="true">>
</ag-grid-angular>

我在GreadReady((和ngOnit上调用此方法，但在"this.gridApi.setColumnDefs(this.columnDefs("上显示错误。实际上这个.gridAPI变得不确定。并在控制台中显示错误 ="无法读取未定义的属性'setColumnDefs'

public getcolumnData()

{
let columnDefs=[];
this.GetGridData();
let header:any =[];
Object.keys(this.JSONDATA).forEach(function(key) {
header.push(key)
}); 
console.log("header.........",header)
columnDefs=[...columnDefs,{headerName:header,field: header  }];
});
this.gridApi.setColumnDefs(this.columnDefs)
}

Answer 1

ag-grid 的gridApi仅在onGridReady事件后可用。有关如何拥有gridApi实例的更多详细信息可以在几乎每个 ag-grid 示例中找到。

参考：列定义示例

现在，该怎么办。

• 在这种情况下，您无需显式调用gridApi.setColumnDefs。在迭代从服务器接收的列详细信息时，只需将它们推送到组件columnDefs即可。在您的模板中，您已经将 columnDefs 数组传递给了 ag-grid。

this.columnDefs = [];
this.columnDefs.push({
headerName: header, field: header
// ... other details
});