сетка ag с Angular: загрузка данных для отдельной ячейки при нажатии кнопки

На моей странице есть сетка ag, и при загрузке значение Price заполняется. Но для нескольких ячеек, если данные недоступны, отображается кнопка LOAD, и при нажатии кнопки вызов службы возвращает данные этой ячейки. Я не могу понять, как вызвать событие щелчка при нажатии кнопки LOAD.

Пожалуйста, проведите меня. (Я не хочу обновлять или перезагружать сетку после вызова службы)

Мой код, как показано ниже.

import { Component, ViewChild } from "@angular/core";
import "ag-grid-enterprise";

@Component({
  selector: "my-app",
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class=""
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [columnTypes]="columnTypes"
      [rowData]="rowData"
      [groupDefaultExpanded]="groupDefaultExpanded"
      [suppressAggFuncInHeader]="true"
      [enableCellChangeFlash]="true"
      [animateRows]="true"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private defaultColDef;
  private columnTypes;
  private rowData;
  private groupDefaultExpanded;

  constructor() {
    this.columnDefs = [
      {
        headerName: "Price",
        field: "a",
        cellRenderer: function(params) {
          console.log('11> ', params.data.a);
          if(params.data.a) {
            console.log('ifffffff');
            return params.data.a;
          } else {
            console.log('elseeee');
            return '<button>LOAD</button>'
          }
        }
      }
    ];
    this.defaultColDef = { sortable: true };
    this.rowData = getRowData();
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    params.api.sizeColumnsToFit();
  }
}

function getRowData() {
  var rowData = [
    {
      a: '1234'
    },
    {
      a: ''
    },
    {
      a: '567'
    },
    {
      a: ''
    }
    ];
  return rowData;
}

angular ag-grid ag-grid-angular
person Anna    schedule 16.07.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете обновить свой конструктор следующим образом:

  constructor() {
   let _that = this;
   this.columnDefs = [
    {
    headerName: "Price",
    field: "a",
    cellRenderer: function(params) {
       console.log('11> ', params.data.a);
       if(params.data.a) {
        console.log('ifffffff');
        return params.data.a;
       } else {
        console.log('elseeee');
        let loadButton = document.createElement('span');
        loadButton.classList.add('');// for your classes
        loadButton.addEventListener('click', function () {
        _that.load(); // your load function
        });
         return loadButton;
       }
     }
    }
  ];
  this.defaultColDef = { sortable: true };
  this.rowData = getRowData();
 }
person YogendraR    schedule 16.07.2019