Si nos vamos a Firebase, podemos ver, como siempre, que cada héroe tiene un identificador:
Podemos obtener un héroe específico si lo consultamos por su identificador.
Para ello vamos a modificar el servicio en primer lugar.
Creamos una función getHeroe a la que le pasamos un identificador, como hicimos con la función de actualizar:
Como se puede ver, la función es muy similar. Primero creamos una url con la ruta general de los héroes y concatenamos el id del héroe mas el ".json". Después llamamos a la función get y le pasamos la url. Esto nos traerá de vuelta el héroe en formato .json.
Ahora vamos a modificar el constructor del componente como sigue:
Como se puede ver, lo único que hemos hecho es hacer una comprobación tras obtener el id de la ruta de la pantalla. Si es el id de un héroe (si no es "nuevo") llamamos a la función getHeroe del servicio y asignamos el héroe obtenido al objeto héroe del componente, de tal forma que se cargarán en los campos del formulario sus datos, al estar estos vinculados a los campos mediante la etiqueta NgModel.
Ahora si arrancamos la aplicación, entramos en la pantalla de nuevo héroe, copiamos el id de un héroe de firebase y lo pegamos en la url del navegador, automáticamente se cargarán los datos del héroe en los campos del formulario:
Y eso sería todo. Sólo vamos a hacer una última cosa más, y es colocar un botón en el formulario del héroe para poder volver al alta de un nuevo héroe y vaciar los campos del formulario.
Para ello creamos un botón justo debajo del botón de regresar:
Como se puede ver, el botón llama a una función agregarNuevo y le estamos pasando por parámetro el formulario de la pantalla.
Ahora creamos en el componente la función agregarNuevo a la que llamamos desde el botón:
Como se puede ver, lo único que hace la función es navegar de nuevo a la página de nuevo héroe pasándole el parámetro "nuevo" a la url, y resetea el formulario poniendo todos los campos en blanco excepto el combo, que inicializamos a "DC".
Ahora arrancamos la aplicación y consultamos un héroe específico, como antes:
Si pulsamos en el botón de nuevo héroe, nos resetea todos los campos:
Y eso es todo.
No hay comentarios:
Publicar un comentario