ag-grid：对特定列使用 Grid 事件 CellClicked - 无法访问“this”答案

【问题标题】：ag-grid: Using Grid Event CellClicked for specific column - cannot access "this"ag-grid：对特定列使用 Grid 事件 CellClicked - 无法访问“this”
【发布时间】：2019-06-20 18:33:50
【问题描述】：

我在网格中有一个列，单击该列时我试图访问某些类方法，但 this 上下文已更改且不可用。前 -

export class PreTflGridComponent implements OnInit {  

  columnDefs = [
    {onCellClicked: this.editCellClicked}
  ];

  constructor() { }   

  method(): void {
      console.log('working');
  }

  editCellClicked(params) {
    this.method();
  }  

}

错误：

ERROR TypeError: this.method is not a function

this 上下文发生更改后，我如何访问方法/属性。

请参阅下面的确切问题 https://stackblitz.com/edit/angular-vwgcc2，如果您单击 make 列并打开控制台，那么它将显示我正在伪造的错误。

【问题讨论】：

你能在 StackBlitz 上重现你的问题吗？
添加到 Stackblitz

标签： angular typescript ag-grid

【解决方案1】：

this 似乎给了你实际的行。你需要做的是告诉你的 makeCellClicked 方法 this 实际上是通过将 this 绑定到它：

onCellClicked: this.makeCellClicked.bind(this).

另请查看您的updated StackBlitz。

【讨论】：

是的，这可行，但现在点击事件发生在所有单元格上。我有一张大桌子，我只希望它在其中一列上。对于其他/未来用途，为什么它不具有约束力？或者如何访问原始的this
thx，我的 js 太糟糕了 :( 这是普通的旧 js 概念。如果您愿意，也可以提及其他答案作为替代。
不需要，因为我认为这与这个问题无关。

【解决方案2】：

您应该使用逻辑简单的 cellRenderer 属性。对于复杂的逻辑渲染器，更方便的方法是使用 cellRendererFramework: YourCustomRendererAngularComponent。

columnDefs = [
{
  headerName: 'Col Name',
  cellRendererFramwork: MyAngularRendererComponent, // RendererComponent suffix it is naming convention
  cellRendererParams: {
    onClick: (params) => this.click(params);  
  }
},
...
]

MyAngularRendererComponent 应该实现 AgRendererComponent。

还有在你使用 MyAngualrRendererComponent 的 Angular 模块中，别忘了放这个代码：

@NgModule({
 imports: [
   AgGridModule.withCompoennts([
      MyAngualrRendererComponent 
   ])
 ]
})

以上代码只是一小部分，请查看Stackblitz上的完整示例

【讨论】：

我在stackblitz上添加了问题，您的回答似乎没有解决问题，请删除或修改