Ag-Grid onGridReady 没有获取参数？

Question

我一直在使用 ag-grid，在查看其他示例时，我看到了人们用来将 ag-grid api 保存为变量以供以后使用的以下 sn-p 代码。

HTML：

 template: `
<ag-grid-angular
  id="grid"
  style="width: 100vw;"
  [style.height] = 'height'
  class="ag-theme-balham ag-grid"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>`

打字稿：

onGridReady(params){
this.resizeGrid();
this.gridApi = params.api;
this.columnsApi = params.columnApi;}

我一直在尝试做类似的事情，但是当我尝试同样的事情时，params 显示为“未定义”。我已经尝试了各种方法来尝试获取 api，但它对我不起作用。我的网格正确加载了我传递给它的数据，但它一直告诉我 params.api 未定义。我在这里错过了什么？

Answer 1

经过多次试验和错误后设法弄清楚，发布解决方案以防万一有人遇到同样的问题。

我从我的 HTML 代码中取出 (gridReady)="onGridReady($event)"，并将以下内容添加到我的 GridOptions 声明中：

onGridReady: this.onGridReady.bind(this),

之后我创建了一个新方法来设置 api，这似乎工作得很好。

onGridReady(event: any){
this.gridApi = event.api;
this.gridApi.sizeColumnsToFit();
}

Answer 2

您可以尝试从 HTML 模板中删除 gridOptions

<ag-grid-angular
  style="width: 600px; height: 500px;"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [animateRows]="true"
  [pagination]="true"
  [sortingOrder]="sortingOrder"
  (gridReady)="onGridReady($event)"

></ag-grid-angular>

注意：在上面的 HTML 模板中没有使用 gridoptions。

如果您想从 API 加载数据。在 .ts 文件中

  onGridReady(params) {
    this.gridApi = params.api;
    console.log('grid api', params.api);
    this.gridColumnApi = params.columnApi;
    // const dataValue = [{firstName: 'Ragavan', age: 31}, {firstName: 'Mike', age: 50}];
    this.http.get('https://your-mock-url/params')
      .subscribe(data => {
          params.api.setRowData(data);
        }
      );
  }

试试上面的代码。希望它应该工作。