Question

我在网格中有一列，当我单击该列时，我试图访问某种类的方法，但是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并打开控制台，则会显示我正在错误的错误。

Answer 1

this似乎在为您提供实际的行。您需要做的是通过将makeCellClicked绑定到this方法来告知this实际上是什么{}：

onCellClicked: this.makeCellClicked.bind(this)。

另请参阅您的updated StackBlitz。

Answer 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

上的完整示例

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

2 个答案: