angular - No se puede usar la interfaz con AngularFirebase

Mientras intentaba crear un carrito de compras en Angular, me he encontrado con problemas de tipo relacionados con mis componentes y servicios. Mi servicio actualmente devuelve AngularFireList<{}> y aunque puedo cambiar su tipo, hacerlo tiene efectos secundarios en otros métodos y dentro de mi componente. Me pregunto si hay una manera eficiente de permitir que mi interfaz actual se convierta en el tipo.

He intentado convertir el tipo a Observable<ProdInterface>, lo cual, de nuevo, resuelve un problema mientras genera otro.

Mi interfaz actual es:

export interface ProdInterface {
    $key:string;
    color_way: string;
    name: string;
    id: number;
    description: string;
    photo:string;
    price:number;
    qty:number;
}

Estoy buscando implementar este método para poder conservar la $key, lo que me permitirá encontrar un elemento en mi base de datos de Firebase:

  async addToCart(product: ProdInterface){
    let cartId = await this.getOrCreateCart();
    let item$ = this.getItem(cartId, product.$key);
    item$.snapshotChanges().pipe(take(1)).subscribe(item => {
       item$.update({ product: product, 
                      quantity: (item.payload.exportVal().quantity || 0) + 1 });
    });
}

Obtener todos mis productos de mi base de datos de Firebase devuelve un tipo Observable<{}> que no tiene el atributo $key que necesito para mi método addToCart

  getAll(){
    return this.db.list('/products').valueChanges();
  }
}

Lo que entonces significa que al usar el método se devuelve el tipo incorrecto:

   this.products$ =  this.productService.getAll();

Mi objetivo final es que pueda mapear el tipo devuelto actual de getAll() a mi ProdInterface para que luego pueda usarlo dentro de mi método addToCart.

Agradecería cualquier orientación en la dirección correcta.

¡Gracias!

Respuesta #1

Con el ejemplo de la documentación de Firebase podrías probar esto:

this.product$ = db.ref("products").orderByKey()
                  .once("value")
                  .pipe(
                  .map(snapshot => {
                      snapshot.forEach(childSnapshot) {
                      var key = childSnapshot.key
                      var childData = childSnapshot.val()
                      return {key, ...childData} 
                      }
                   }));