Question

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

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显示为“ undefined”。我已经尝试了各种方法来尝试获取api，但它对我不起作用。我的网格使用传递给我的数据正确加载，但是它一直告诉我params.api是未定义的。我在这里想念什么？

Answer 1

您可以尝试从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);
        }
      );
  }

尝试上面的代码。希望它能工作。

Answer 2

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

我从HTML代码中取出了（gridReady）=“ onGridReady（$ event）”，并将以下内容添加到了GridOptions声明中：

onGridReady: this.onGridReady.bind(this),

此后，我创建了一个新的方法来设置api，该方法似乎正常工作。

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

Ag-Grid onGridReady无法获取参数？

2 个答案: