Para eliminar un héroe de Firebase necesitamos llamar a la función delete y pasar, cómo no, el identificador del registro que queremos eliminar.
Vamos a modificar primero el servicio para crear la función borrarHeroe:
Como se puede ver, la función es igual que las demás. Creamos la url con el identificador y se la pasamos a la función delete.
Ahora creamos la función borrarHeroe en el componente:
Esta función es también similar a las anteriores. Llamamos al servicio y le pasamos el identificador. La diferencia es que aquí, en la función dentro del subscribe, utilizamos el comando delete sobre el objeto "heroes" del componente para eliminar también de la lista de héroes el héroe específico cuyo identificador coincida con el que pasamos a la función.
¿Por qué hacemos esto? Porque aunque eliminemos el registro de Firebase, en la lista de héroes del componente que mostramos por pantalla el héroe sigue ahí, y se va a seguir mostrando, creando la sensación de que el registro no se ha eliminado. Por eso, además de eliminar el héroe de Firebase, tenemos que eliminarlo de nuestra lista de héroes.
Por último, creamos en la tabla del html dos botones, uno para actualizar y otro para borrar:
Como se puede ver, el botón de editar lo único que hace es un touterLink a la página de nuevo héroe pasando el identificador del héroe correspondiente, que, gracias a lo que hicimos en las anteriores entradas, cargará los datos del héroe correspondiente para que podamos editarlo.
El botón de eliminar lo único que hace es llamar a la función borrarHeroe del componente pasando el identificador del mismo.
Con esto tendríamos terminada la parte de eliminar un registro. Sin embargo, tenemos un problema.
Cuando eliminamos un héroe, tanto de Firebase como de la lista de héroes del componente, la directiva NgFor del componente va a fallar al no encontrar el héroe que falta porque el pipe que utilizamos para la lista de objetos no se vuelve a disparar. Para ello, debemos transformar nuestro pipe en impuro:
De esta forma, el pipe se disparará cada vez que se produzca un cambio y no nos dará problemas.
Ahora arrancamos la aplicación y eliminamos un héroe:
Y comprobamos que desaparece:
Podemos entrar en Firebase para comprobar que tampoco se encuentra ya ése registro.
Y eso sería todo. Vamos a modificar un par de cosas para que la aplicación quede un poco mejor.
Vamos a crear una alerta de cargando en nuestra tabla que se mostrará hasta que tengamos todos los héroes de Firebase y podamos mostrarlos en pantalla.
Por otro lado, también vamos a crear otra alerta con un mensaje que aparecerá sólo si no hay ningún héroe en Firebase.
Empezamos modificando el componente "heroes" como sigue:
Como se puede ver, hemos creado un variable booleana para comprobar si la pantalla está cargando los datos. La variable pasará a falso cuando todos los héroes estén cargados. Las dos líneas que están comentadas son las correctas, sin embargo, el proceso es tan rápido que las incluimos en una función timeout de 3 segundos para que nos dé tiempo a apreciar el cambio.
Ahora creamos las dos alertas en el html, justo debajo de la tabla:
Como se puede ver por las directivas NgIf de cada alerta, el mensaje de cargando sólo se mostrará mientras la variable loading del componente sea verdadera, mientras que el mensaje de que no hay héroes se mostrará cuando la variable loading del componente sea falsa y además el tamaño del array de keys de héroes sea igual a cero (no hay registros).
Ahora si arrancamos la aplicación comprobamos que se muestra el mensaje de cargando:
Y a los 3 segundos desaparece y se muestran los datos:
Si borramos todos los héroes, se muestra el mensaje de que no hay datos:
Y eso es todo.
No hay comentarios:
Publicar un comentario