Siguiendo la aplicación anterior, nos vamos a Firebase y podemos comprobar que todos los héroes creados tienen un id propio creado por Firebase:
La modificación de un registro se hace de forma muy parecida al alta, pero necesitamos indicarle a Firebase qué registro concreto queremos actualizar utilizando el id del registro correspondiente.
Vamos a modificar primero el servicio.
Lo primero que tenemos que hacer es guardar la ruta de los héroes de Firebase en una variable. Igual que hicimos con el alta, pero esta vez en lugar de concatenarle ".json" le concatenamos la barra "/":
Esto nos servirá luego para concatenar a esa url el identificador del registro que queramos modificar.
Ahora nos creamos una nueva función "actualizarHeroe" como sigue:
Como se puede ver, es muy similar a la del alta de la entrada pasada. Sólo hay 3 cambios:
1. Añadimos como parámetro de entrada el id del registro a modificar (que guardamos en una variable llamada key de tipo string).
2. Nos creamos una url partiendo de la url que nos creamos antes al principio del servicio y le concatenamos el id del registro a modificar, y le concatenamos también el ".json".
3. Cambiamos el comando "post" por "put".
El resto es exactamente igual.
Pasamos ahora a modificar el componente.
Primero nos creamos dos variables más, una de tipo booleano, que inicializamos a false, y otra de tipo string:
La variable id de tipo string nos servirá para guardar el identificador del héroe a modificar, y la variable booleana nos servirá para que el botón de guardar (vamos a utilizar ese botón tanto para crear nuevos héroes como para actualizarlos) sepa si tiene que crear un nuevo héroe o si tiene que modificarlo.
Ahora modificamos el constructor como sigue:
Como se puede ver, le hemos inyectado un ActivatedRoute, del que obtenemos el parámetro "id" y lo guardamos en la variable que creamos antes.
Si recordamos todo lo que hemos hecho en esta aplicación desde que la creamos, sabremos que en la función del alta de registro, después de la misma, concatenábamos a la ruta actual el identificador del registro creado. También sabremos que en el fichero de rutas de la aplicación, para acceder a la ruta del alta teníamos lo siguiente: "{ path: 'heroe/:id', component: HeroeComponent }", lo que quiere decir que a la ruta le estamos pasando un parámetro "id".
Es por estas dos razones que podemos obtener el id del héroe recién creado mediante el ActivatedRoute.
Ah, no hay que olvidarse de importar el ActivatedRoute:
Por último, vamos a modificar la función de guardar como sigue:
Como se puede ver, hemos utilizado un if para comprobar si el registro que vamos a guardar es nuevo o no. Para ello utilizamos el id del parámetro recogido con el ActivateRoute. Si es "nuevo", es que hemos entrado a la pantalla desde el botón de nuevo héroe, y llamamos a la función nuevoHeroe del servicio. Si el parámetro no es "nuevo" es que el parámetro es el identificador de un héroe, y llamamos a la función actualizarHeroe del servicio.
Como se puede ver, la función de actualizar es igual que la del alta, solo que le pasamos también el id del héroe por parámetro, y que no viajamos de nuevo a la url del héroe.
Ahora si arrancamos la aplicación y pulsamos en el botón de nuevo héroe, podemos comprobar que el id del parámetro de la ruta es "nuevo":
Rellenamos los campos y guardamos. Nos vamos a Firebase y comprobamos que el héroe está guardado:
Y que nos ha redirigido a la url con el identificador del héroe. Modificamos la Bio, por ejemplo, y pulsamos en el botón de guardar de nuevo:
Y comprobamos que el héroe ha sido modificado en Firebase:
Y eso es todo.
No hay comentarios:
Publicar un comentario