Unable to use interface with AngularFirebase

Question

While trying to create a shopping cart in angular, I've run into type issues regarding my components and services. My service currently returns AngularFireList<{}> and though I can change its type, doing so has side-effects in other methods and inside of my component. I'm wondering if there is an efficient way to allow my current interface to become the type.

I've tried to cast the type as Observable<ProdInterface> which again, solves one issue while bringing in another.

My current interface is:

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

I'm looking to implement this method so that I can keep the $key which will allow me to find an item in my firebase database:

  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 });
    });
}

Getting all of my products from my firebase database returns an Observable<{}> type which does not have $key attribute I need for my addToCart method

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

Which then means when using the method the wrong type is returned:

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

My end goal is such that I can map the current returned type of getAll() to my ProdInterface so that I can then use it inside of my addToCart method.

I would appreciate any guidance in the right direction.

Thanks!

Answer 1

With the example from the Firebase docs you could try this:

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} 
                      }
                   }));