从 ts 文件访问 ag 网格答案

【问题标题】：access ag grid from ts file从 ts 文件访问 ag 网格
【发布时间】：2020-05-26 19:40:49
【问题描述】：

我正在使用 ag-grid-angular 在我的 Angular 应用程序中显示数据。有一个按钮显示在 ag 网格之外。单击按钮时，我需要从网格中获取所有行数据。我知道有一个 API 可以实现这一点。基本上，我想从 ts 文件访问 ag 网格。请在下面找到我的代码。

ts 文件中的代码

this.columns = [
  {},
  {headerName: 'First Name', field: 'firstName'},
  {headerName: 'Last Name', field: 'lastName'}
];

this.rows = [
    {"", "first name1", "last name1"},
    {"", "first name2", "last name2"}
];

html 组件中的代码

<ag-grid-angular id="myGrid" #agGrid style="width: 100%" class="ag-theme-balham" [rowData]="rows" [columnDefs]="columns">
<ag-grid-angular>

请告诉我如何实现这一目标。

谢谢

【问题讨论】：

标签： angular typescript ag-grid-angular

【解决方案1】：

AgGrid 提供不同的 API 来访问和配置网格中的数据。

您正在寻找的是 GridApi，一旦通过 gridReady 事件初始化，您可以从 Ag 网格中获取它。

希望下面的代码 sn-p 回答您的问题。

import { Component } from '@angular/core';
import { GridApi, GridReadyEvent } from 'ag-grid-community';

@Component({
  selector: 'app-root',
  template: `
    <ag-grid-angular
      style="width: 100%; height: 500px;"
      class="ag-theme-balham"
      [rowData]="rows"
      [columnDefs]="columns"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
    <br />
    <button (click)="getData()">Get Data</button>
  `
})
export class AppComponent {
  columns = [
    { headerName: 'First Name', field: 'firstName' },
    { headerName: 'Last Name', field: 'lastName' }
  ];

  rows = [
    { firstName: 'first name1', lastName: 'last name1' },
    { firstName: 'first name2', lastName: 'last name2' }
  ];

  gridApi: GridApi;

  onGridReady(params: GridReadyEvent) {
    console.log(params);
    this.gridApi = params.api;
  }

  getData() {
    if (!this.gridApi) {
      return;
    }
    const rowCount = this.gridApi.getDisplayedRowCount();
    for (let i = 0; i < rowCount; i++) {
      const rowNode = this.gridApi.getDisplayedRowAtIndex(i);
      console.log(`row ${i + 1} -> `, rowNode.data);
      // Perform your logic
    }
  }
}

请参阅 Ag-Grid Angular 的 official documentation 了解更多信息。干杯，编码愉快！！！

【讨论】：

我尝试了上面的例子，但它并没有真正起作用。