ag-grid: Использование Grid Event CellClicked для определенного столбца - невозможно получить доступ к «this»

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).

Пожалуйста, смотрите также обновленный 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.

Также в угловом модуле, где вы используете этот код, я не помню:

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

Приведенный выше код является лишь небольшой частью, посмотрите полный пример на Stackblitz