Angular: 50. CRUD Firebase. HTTP - GET. Consultar todos los registros

Vamos a ver cómo consultar todos los registros y mostrarlos en una tabla.

Esta vez vamos a modificar, por fin, el componente "heroes" que creamos al principio de la aplicación y que hasta ahora sólo utilizábamos para poner el botón que nos llevaba a la pantalla de nuevo héroe.
Si recordamos bien, cuando creamos la aplicación, pintamos en ése componente una tabla para mostrar todos los héroes de la base de datos. Ahora vamos a llenarla por fin.

Lo primero que tenemos que hacer es crear en el servicio una función que nos traiga todos los héroes creados de Firebase:

Como se puede ver, la función es casi igual que la que nos creamos en la consulta individual, pero esta ven no le pasamos por parámetro ningún identificador (queremos traernos todos los héroes) ni nos creamos una url personalizada, sin que utilizamos la url general que nos creamos al principio de la aplicación, que llegaba hasta el nodo "héroes":
heroesURL:string = "https://heroesapp-10bce.firebaseio.com/heroes.json";

Ahora vamos a modificar el componente "heroes" como sigue:

Como se puede ver, nos hemos creado una variable array de heroes de tipo any, hemos inyectado el servicio en el constructor, y desde ahí llamamos a la función getHeroes del servicio, guardando en nuestra variable heroes el valor de la data que devuelve el servicio.

Con esto ya tenemos los héroes en nuestra aplicación. Sin embargo, tenemos un problema. El conjunto de héroes devuelto no es un array de héroes, sino un objeto con una lista de objetos en su interior. Esto significa que, a la hora de mostrar los datos en la pantalla por el html, no podremos recorrerlo con la directiva NgFor, ya que ésta sólo sirve con arrays.
Lo que vamos a hacer es crearnos un pipe personalizado para que le pasemos la lista de objetos y nos devuelva un array con los id de los objetos, y entonces sí podremos utilizar el Ngfor.

Primero nos creamos el pipe:

Y lo modificamos de la siguiente forma:

Como se puede ver, creamos un array de keys y lo vamos rellenando con la key de cada objeto héroe.

Ahora sí podemos mostrar los datos utilizando la directiva NgFor. Modificamos la tabla del html como sigue:

Como se puede ver, gracias al pipe, estamos recorriendo una lista de keys (id) en lugar de la lista de héroes, y vamos mostrando los atributos de los objetos haciendo referencia a la key de cada uno.

Ahora si arrancamos la aplicación podemos ver que la lista de héroes se carga correctamente:

Y eso es todo.