Question

我的页面上有一个网格网格，并且填充了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;
}

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

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

1 个答案: