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

我用这个小小的stackblitz示例演示了我的真实世界大项目。我有ag网格，所有列都可以通过

（cellClicked）=“onCellClicked（$event）”

在所有这些配置之后，网格如下所示

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

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

这里的问题是，当单击“分配”列上的按钮时，方法

Assign（）

从未触发。始终

onCellClicked（）

触发并打印“cellclicked”。我浏览了ag grid文档，找到了

suppressRowClickSelection

，但对我不起作用。还对按钮进行了停止播放，但也不起作用。单击时如何触发单击按钮的方法

assign（）

---

Stackblitz:

您没有正确地执行按钮。您不能传递函数

cellRenderer

，必须传递实现

ICellRenderAngularComp

接口的组件。因此，您需要为按钮创建自己的自定义单元渲染器

大概是这样的：

@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);

    }
  }
}

最后，您需要通过传入

frameworkComponents

param告诉网格有关此按钮的信息，如下所示：

  frameworkComponents = {
      buttonRenderer: ButtonRendererComponent,
    }

在您的html中：

[frameworkComponents]="frameworkComponents"

---

这是一个演示。

非常感谢，非常有帮助。做得很好

  frameworkComponents = {
      buttonRenderer: ButtonRendererComponent,
    }

[frameworkComponents]="frameworkComponents"