Angular Material 2 Table Mat Row Click evento también llamado con clic de botón en Mat Cell

Después de mucho trabajar pudimos dar con la respuesta de este enigma que muchos usuarios de nuestro sitio web tienen. Si tienes algún detalle que compartir no dudes en dejar tu información.

Solución:

Acabo de tener el mismo problema y lo resolví usando el comentario de Will en la publicación original, agregando un controlador de clic con $event.stopPropagation a la celda como padre directo al botón. Lo agregaré aquí como una solución en caso de que alguien más venga aquí buscando la misma respuesta.

Tengo una tabla de datos de materiales donde la fila tiene un evento de clic para llevarlo a un modo de edición y la última columna contiene un botón con una acción de eliminación. ¡Obviamente, no desea activar la eliminación y la edición al mismo tiempo!

Aquí está la estructura que he usado que resuelve el problema:

Retazo

// Row definition containing a click event


// Definition for the cell containing the button

    
    
        
            delete
        
    

Código de tabla completa

    
        Name
         group.name 
    
    
        Description
         group.description 
    
    
        
        
            
                delete
            
        
    

    
    

Nuevamente, todo el crédito para Will Howell por esta solución.

La respuesta aceptada actual tiene un defecto en mi opinión. La solución anterior mantiene parte de la fila en la que no se puede hacer clic. Para poder hacer clic en toda la fila, puede pasar $event al componente en html y llamar a stoppropogation desde el componente:

html:

    edit Breyta
  

Componente:

openDialog(data, event): void 
event.stopPropagation();
const editDialogRef = this.dialog.open(EditClientComponent, 
  data: data
);

Te mostramos las comentarios y valoraciones de los lectores

Recuerda que tienes concesión de agregar una reseña si diste con el hallazgo.

---

---

Utiliza Nuestro Buscador