Как отрендерить несколько ag-grid в одном компоненте с помощью Angular 6

У меня есть несколько ag-grid на html-странице, я хочу получить конкретные значения строк ag-grid в компоненте.

html

 <ag-grid-angular #agGrid1 style="width: 1250px; margin-left: 5px ; height:120px;background-color: #CFD8DC;"
    class="ag-theme-balham" [rowData]="rowsData1" [columnDefs]="cols" rowSelection="multiple"
    [enableCellChangeFlash]="true">
  </ag-grid-angular>

 <ag-grid-angular #agGrid2 style="width: 1250px; margin-left: 5px ; height:120px;background-color: #CFD8DC;"
    class="ag-theme-balham" [rowData]="rowsData2" [columnDefs]="cols2" rowSelection="multiple"
    [enableCellChangeFlash]="true">
  </ag-grid-angular>

component.ts

  @ViewChild('agGrid1', { static: true }) agGrid: AgGridAngular;
  @ViewChild('agGrid2', { static: true }) agGrid2: AgGridAngular;

  getRowsData() {

      this.selectedRows1 = this.agGrid.api.getSelectedRows();
      this.selectedRows2 = this.agGrid2.api.getSelectedRows();
     console.log( this.selectedRows1,  this.selectedRows2)

  }

Здесь я пытаюсь получить значения обеих строк ag-grid, но получаю:

ОШИБКА TypeError: невозможно прочитать свойство «api» неопределенной ошибки.


angular ag-grid-angular
person Zameer    schedule 13.01.2020    source источник
comment
Привет, @Zameer, ознакомьтесь с руководством по StackOverflow Как задать вопрос. В текущем состоянии - ваш вопрос будет закрыт. Пожалуйста, вставьте код, который вы пробовали, каков ожидаемый результат и что произошло на самом деле. Если есть журнал ошибок - включите и его. Может быть, добавить воспроизводимую ссылку на stackblitz.com?   -  person tftd    schedule 13.01.2020
comment
Отвечает ли это на ваш вопрос? несколько экземпляров ag-grid на одной странице, используя single gridOptions   -  person FabioG    schedule 13.01.2020
comment
Нет, это не устранило проблему   -  person Zameer    schedule 13.01.2020

Ответы (2)


arrow_upward
2
arrow_downward

Готово Ag-Grid setUp

И я пробовал с приведенным ниже кодом, правильно привязать сетку

В вашем HTML-файле

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
    [columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
          (gridReady)="onGridReady1($event)"
>
</ag-grid-angular>

и в файле app.component.ts

private gridApi;
  private gridColumnApi;
  private gridApi1;
  private gridColumnApi1;
  rowSelection = "single";
  columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }
  ];
  rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ];
  onSelectionChanged() {
    var selectedRows = this.gridApi.getSelectedRows();
    var selectedRows1 = this.gridApi1.getSelectedRows();
    console.log(selectedRows);
    console.log(selectedRows1);
  }
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
  onGridReady1(params) {
    this.gridApi1 = params.api;
    this.gridColumnApi1 = params.columnApi;
  }

Я могу получить оба значения сетки в onSelectionChanged() методе

Вот экран вывода

введите описание изображения здесь Надеюсь, это поможет вам

дайте мне знать, если у вас возникнут проблемы с указанным выше

Благодарность

person kushal shah    schedule 13.01.2020
comment
Привет, Кушал, спасибо за ответ, я постараюсь обновить тебя. - person Zameer; 13.01.2020
comment
@Kushal: можем ли мы добавить n количество сеток ag в один компонент. Спасибо заранее. - person Prasad; 22.07.2021

arrow_upward
0
arrow_downward

Ваш код выглядит нормально. Вы только что допустили опечатку: замените @ViewChild('agGrid'... на @ViewChild('agGrid1'..., поскольку это имя вы указали в шаблоне HTML.

person Qortex    schedule 13.01.2020