enter code here . Estoy tratando de crear botones de edición y eliminación en la misma columna para cada fila usando la cuadrícula angular ag. Para mostrar los botones de edición y eliminación, estoy usando iconos. Puedo mostrar los íconos de eliminar y editar para cada fila en la cuadrícula agrícola, pero no puedo hacer clic en esos íconos. A continuación se muestran las imágenes respectivas de eso. Traté de hacer clic en el evento dentro del botón, pero no funcionó, también intenté escribir el evento de clic en la etiqueta del icono, pero tampoco funcionó. A continuación se muestra mi código que estoy usando
Puede seguir este enfoque para crear un evento de clic en el procesador de celdas.
Primero: crear una celda de botón
cree un procesador de celdas de botón como un componente Angular que implemente la interfaz ICellRendererAngularComp de la siguiente manera:
@Component({ selector: 'btn-cell-renderer', template: ` <button (click)="handleClickEvent($event)">Click me</button> `, }) export class BtnCellRenderer implements ICellRendererAngularComp { private params: any; agInit(params: any): void { this.params = params; } handleClickEvent() { this.params.clicked(this.params.value); } }Se accede al objeto params a través del enlace agInit.
Segundo: registre el BtnRenderer en el módulo de la aplicación
// aplicación/aplicación.módulos.ts
@NgModule({ imports: [ BrowserModule, FormsModule, HttpClientModule, AgGridModule.withComponents([BtnCellRenderer]), ], declarations: [AppComponent, BtnCellRenderer], bootstrap: [AppComponent], })Tercero: use el renderizador Use el renderizador en su componente de la siguiente manera
// app/app.component.ts this.columnDefs = [ { field: 'action', cellRenderer: 'btnCellRenderer', cellRendererParams: { clicked: function(field: any) { alert(`${field} was clicked`); } }, minWidth: 100, } ]; this.frameworkComponents = { btnCellRenderer: BtnCellRenderer };Puede seguir la respuesta de kplus y, para mostrar dos botones, cree dos renderizadores y vincúlelos por separado con el botón editar y eliminar en su columnaDefs.
columnDefs = [ { field: 'edit', cellRenderer: 'editRenderer', headerClass: 'my-header-class', cellRendererParams: { onClick: this.onClickEdit.bind(this) } }, { field: 'Delete',cellRenderer: 'deleteRenderer', headerClass: 'my-header-class', cellRendererParams: { onClick: this.onClickDelete.bind(this) } }]; onClickEdit(params) { //code } onClickDelete(params) { //code } constructor() { this.frameworkComponents = { editRenderer: EditComponent, deleteRenderer: DeleteCompoenent }