доступ к сетке AG из файла TS

Я использую ag-grid-angular для отображения данных в моем приложении Angular. Есть кнопка, которая отображается за пределами сетки. При нажатии кнопки мне нужно получить все данные строки из сетки. Я знаю, что для этого существует API. По сути, я хочу получить доступ к сетке ag из файла ts. Пожалуйста, найдите мой код ниже.

код в файле 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>

Пожалуйста, дайте мне знать, как этого добиться.

Спасибо


typescript angular ag-grid-angular
person Ashy Ashcsi    schedule 11.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

AgGrid предоставляет различные API для доступа и настройки данных в сетке.

Вам нужен GridApi, который вы можете получить из сетки Ag после ее инициализации с помощью события gridReady.

Надеюсь, что приведенный ниже фрагмент кода отвечает на ваш запрос.

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. Ура и счастливого кодирования !!!

person Shravan    schedule 11.02.2020
comment
Я пробовал приведенный выше пример, но это не сработало. - person Ashy Ashcsi; 14.02.2020