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

Question

我用这个小小的 stackblitz 展示了我真实世界的大项目 example.I 有 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() 触发并打印“Cell clicked”。我浏览了 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 是一个演示。

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

Ag- grid button click doesnt work inside cell

javascript

css

typescript

ag-grid

angular