ag-grid - AgGrid 中的行数

Question

我想在 AgGrid 中显示行数，但遇到了问题。

    ngOnInit() { 
      console.log(this.gridOptions.api.getDisplayedRowCount());
    }

错误:

ERROR TypeError: Cannot read property 'getDisplayedRowCount' of undefined
    at ProjectListComponent.webpackJsonp../src/app/project-list/project-list.component.ts.ProjectListComponent.ngOnInit (project-list.component.ts:178)
    at checkAndUpdateDirectiveInline (core.js:12411)
    at checkAndUpdateNodeInline (core.js:13935)
    at checkAndUpdateNode (core.js:13878)
    at debugCheckAndUpdateNode (core.js:14771)
    at debugCheckDirectivesFn (core.js:14712)
    at Object.eval [as updateDirectives] (ProjectListComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callViewAction (core.js:14195)

Api AgGrid:

getDisplayedRowCount()  Returns the total number of displayed rows.

我不明白为什么我有这个问题......

Answer 1

(你提到 ngOnInit 所以我假设你使用的是 Angular)
问题是 ngOnInit 中的 api 不可用。如果您需要网格 api，您应该监听 gridReady 事件。

gridReady: ag-Grid has initialised. Use this event if, for example, you need to use the grid's API to fix the columns to size. Documentation

html:

<ag-grid-angular   style="width: 100%; height: 372px;"
  (gridReady)="onGridReady()">
</ag-grid-angular>

组件 ts:

onGridReady(params: any) {
  console.log('grid ready');
  console.log(this.gridOptions.api.getDisplayedRowCount());
}

您还应该记住，关于 this site 有一个注释:

Sometimes the gridReady grid event can fire before the Angular component is ready to receive it, so in an Angular environment its safer to rely on AfterViewInit instead before using the API.

尽管如此，我在使用 gridReady 事件时从未遇到任何问题。