3

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!

Constantin Beer
  • 5,447
  • 6
  • 25
  • 43
Joel Carter
  • 151
  • 12
  • Is `$key` representing your document's id in your firebase db? – Constantin Beer Aug 31 '19 at 03:59
  • @ConstantinBeer Yes it is – Joel Carter Aug 31 '19 at 04:05
  • Maybe this helps https://stackoverflow.com/questions/57710997/firestore-how-to-include-doc-id-in-doc-data-while-mapping/57711170#57711170 – Constantin Beer Aug 31 '19 at 04:14
  • @ConstantinBeer Thanks for the link, and this is a step in the right direction -- however I'm using the realtime database not firestore for the project. And it seems that the properties listed are different – Joel Carter Aug 31 '19 at 04:22
  • I guess you already read the AngularFire docs? https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md#angularfireaction---action-based-api – Constantin Beer Aug 31 '19 at 05:14
  • @ConstantinBeer Sure have, might be tired eyes at this point but I'm having a hard time connecting the dots based on the docs too – Joel Carter Aug 31 '19 at 05:32
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198753/discussion-between-joel-carter-and-constantin-beer). – Joel Carter Aug 31 '19 at 05:37

1 Answers1

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} 
                      }
                   }));
Constantin Beer
  • 5,447
  • 6
  • 25
  • 43
  • I have a version of this, but slightly different. I'm working on fixing a bug when the addToCart button is clicked now – Joel Carter Aug 31 '19 at 06:46