Ag-Grid cellRender с нажатием кнопки

Question

Я использую угловую 5 с таблицей данных ag-grid, я не могу вызвать событие щелчка из ячейки, используя cellRenderer, как я использую ag-grid -> colDefs

this.columnDefs = [
            {headerName: '#', rowDrag: true, width: 75},
            {headerName: 'One', field: 'fieldName',
                cellRenderer : function(params){
                    return '<div><button (click)="drop()">Click</button></div>'
                }
            }
];

drop() {
    alert("BUTTON CLICKEFD")
}

, если яиспользуя onClick="alert("123")" -> он работает, но я не могу использовать onClick="drop()" он выбрасывает каплю неопределенного,

я пробовал это тоже внутри cellRenderer -> params = params.$scope.drop = this.drop;

если я использую gridOptions с angularCompileRows : true, выдает ошибку Cannot read property '$apply' of undefined. Нужно ли устанавливать ag-grid enterprise ??

Answer 1

У вас есть эта проблема, потому что вы вызываете drop () неправильно, вы должны изменить его на this.drop ()

В общем случае вы должны использовать свойство 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 
   ])
 ]
})

Answer 2

Вы можете использовать cellRenderer с компонентом кнопки.Если вы хотите получить событие нажатия на кнопку от пользователя на столе, просто объявите функцию обратного вызова, которую вы хотите cellRendererParams.

// app.component.ts
columnDefs = [
{
  headerName: 'Button Col 1',
  cellRenderer: 'buttonRenderer',
  cellRendererParams: {
    onClick: this.onBtnClick.bind(this),
    label: 'Click'
  }
},
...
]

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