时间戳

首页 > 解决方案 > Ag-grid 按钮单击在单元格内不起作用

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

问题描述

我用这个小小的 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()？

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

标签： javascriptcssangulartypescriptag-grid

解决方案

你还没有完全正确地实现你的按钮。你不能传递一个函数 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"

这是一个演示。

推荐阅读