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

Question

下面是 ag 网格的代码，它在“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)" 上显示错误。实际上 this.gridAPI 正在取消定义。并在控制台中显示错误 ="Cannot read property 'setColumnDefs' of undefined"

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 实例的更多详细信息，几乎可以在每个农业网格示例中找到。

参考：Column Definition Example

现在，要做什么。

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

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

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

How to display column dynamically according to API responce using ag-grid

ag-grid