带有Angular的ag网格：单击按钮时为单个单元格加载数据答案

【问题标题】：ag grid with Angular: load data for single cell on button click带有Angular的ag网格：单击按钮时为单个单元格加载数据
【发布时间】：2019-11-25 00:49:30
【问题描述】：

我的页面有一个 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

【解决方案1】：

你可以像这样更新你的构造函数：

  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();
 }

【讨论】：