不是 Angular 中的函数错误（ag-grid）答案

【问题标题】：not a function error in Angular (ag-grid)不是 Angular 中的函数错误（ag-grid）
【发布时间】：2021-11-13 07:34:17
【问题描述】：

我正在尝试在 ag-grid 中定义一个按钮以从数据库中删除选定的行。

但是当按钮被点击时，我得到了错误：ERROR TypeError: this.deleteContact is not a function。

我应该怎么做才能解决这个问题？


import { ButtonrendererComponent } from '../buttonrenderer/buttonrenderer.component';

export class DashboardComponent implements OnInit {

  frameworkComponents = {
    buttonRenderer: ButtonrendererComponent,
    }

  constructor(private api: ApiService) {}

  ngOnInit(): void {
    this.getContactDetails(); 
  }

  columnDefs=[
    {headerName: 'ID', field:'id', width: 200},
    {
      headerName: 'Delete',
      cellRendererFramework: ButtonrendererComponent,
      cellRendererParams: {
      label: 'Delete',
      onClick: this.onBtnClick1
      }
    },
  ]

  deleteContact(id){
    this.api.deleteContact(id)
    .subscribe(res =>{
      alert("Contact deleted");
      this.getContactDetails();
    });
  }

  onBtnClick1(e) {
    alert(e.data.id)
    this.deleteContact(e.data.id)
  }
}

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

这是因为this 与ButtonrendererComponent 不同，请在下方尝试。

cellRendererParams: {
      label: 'Delete',
      onClick: () => this.onBtnClick1()
}

【讨论】：

我应该将什么参数传递给函数？我试过了：onClick: () => this.onBtnClick1 但它不起作用。
试试() => this.onBtnClick1() 而不是() => this.onBtnClick1。
否则将 this 绑定到 onClick 可能会为您提供解决方案，例如`onClick: this.onBtnClick1.bind(this)`。