ag-grid onGridReady 不工作答案

【问题标题】：ag-grid onGridReady not workingag-grid onGridReady 不工作
【发布时间】：2018-09-29 01:12:45
【问题描述】：

我想在单击按钮时加载 ag-grid。我尝试了两种方法，但都没有奏效

我的代码：第一种方法

 onBtnClick(){
    this.gridOptions ={
        onGridReady : function(){
            console.log("print");
        }
    }
}

第二种方法：

onBtnClick(){
    this.onGridReady();
}
onGridReady(){
   this.gridApi = params.api;
    console.log("print");
}

第一种方法不起作用。第二种方法说没有定义api

【问题讨论】：

你也可以分享 HTML 吗？只是想确保 gridOptions 正确绑定
我正在使用 [gridOptions] = "gridOptions" (gridReady) ="onGridReady ($event)

标签： javascript angular typescript grid ag-grid

【解决方案1】：

你可以有这种方法。

在您的组件中有一个标志何时显示网格。
使用此标志有条件地显示使用*ngIf 的网格
在按钮单击时设置此标志值

这样，具有ag-grid 的模板在设置标志之前不会被渲染。设置后，将渲染模板并调用onGridReady。

<button (click)="btnClick()">Display grid</button>
<ag-grid-angular *ngIf="displayGrid"
  #agGrid
  ......
></ag-grid-angular>


btnClick(){
  this.displayGrid = true;
}

检查这个工作示例：ag-grid display on button click

【讨论】：

【解决方案2】：

您是否检查过ag-grid 是否连接到onGridReady？

它应该看起来像这样：

<ag-grid-angular
 ...
 (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

【讨论】：

【解决方案3】：

你应该分享更多你的代码，不清楚你在做什么。

在网格初始化之前，您必须确保您的 gridOptions 已完全设置。（在按钮上执行此操作为时已晚）

ngOnInit(): void {
  this.gridOptions.onGridReady = gridReadyHandler;
}
gridReadyHandler = (params: GridReadyEvent) => {
  this.gridApi = params.api;
  console.log("grid is done loading", this.gridApi);
}

【讨论】：