Ag-grid 按钮单击在单元格内不起作用

Question

我用这个小小的 stackblitz 示例演示了我在现实世界中的大项目。我有 ag-grid 并且所有列都可以通过 (cellClicked)="onCellClicked($event)" 进行点击

<div style="width: 400px;">
    <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-theme-fresh"
        (cellClicked)="onCellClicked($event)" [gridOptions]="gridOptions" [suppressRowClickSelection]="true">
    </ag-grid-angular>
</div>
  onCellClicked(params) {
    alert("Cell clicked");
  }

我还在最后一列插入了带有buttonRenderer 的按钮，如下所示

 {
        headerName: "Assign buttons",
        width: 100,
        cellRenderer: this.buttonRenderer
      }

  buttonRenderer(params) {
    return "<button (click)='assign()'>Assign me</button>";
  }
  assign() {
    alert("Assigned");
  }

所有这些配置网格如下所示

这里的问题是当单击“分配”列上的按钮时，方法 assign() 从未触发。始终onCellClicked() 触发并打印“单击单元格”。我浏览了 ag-grid 文档并找到了 suppressRowClickSelection 但对我不起作用。还给了按钮 stopPropagation 但也没有用。单击时如何触发单击按钮的方法assign()？

堆栈闪电战：https://stackblitz.com/edit/angular-ag-grid-angular-3ctzvo?file=app%2Fmy-grid-application%2Fmy-grid-application.component.ts

Answer 1

您还没有完全正确地实现您的按钮。你不能传递一个函数cellRenderer，你必须传递一个实现ICellRendererAngularComp接口的组件。因此，您需要为按钮创建自己的自定义单元格渲染器。

类似这样的：

@Component({
  selector: 'app-button-renderer',
  template: `
    <button type="button" (click)="onClick($event)">{{label}}</button>
    `
})

export class ButtonRendererComponent implements ICellRendererAngularComp {

  params;
  label: string;

  agInit(params): void {
    this.params = params;
    this.label = this.params.label || null;
  }

  refresh(params?: any): boolean {
    return true;
  }

  onClick($event) {
    if (this.params.onClick instanceof Function) {
      // put anything into params u want pass into parents component
      const params = {
        event: $event,
        rowData: this.params.node.data
        // ...something
      }
      this.params.onClick(this.params);

    }
  }
}

你需要这个组件的参数是你的assign函数来告诉按钮按下按钮时调用什么和按钮标签：

headerName: "Assign buttons",
width: 100,
cellRenderer: "buttonRenderer",
cellRendererParams: {
  onClick: this.assign.bind(this),
  label: "Click"
}

最后，您需要通过像这样传递frameworkComponents 参数来告诉网格这个按钮：

  frameworkComponents = {
      buttonRenderer: ButtonRendererComponent,
    }

在你的 html 中：

[frameworkComponents]="frameworkComponents"

Here 是一个演示。