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!

Is $key representing your document's id in your firebase db? — Constantin Beer
– Constantin Beer, Commented Aug 31, 2019 at 3:59
@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
– Joel Carter, Commented Aug 31, 2019 at 4:22
I guess you already read the AngularFire docs? github.com/angular/angularfire2/blob/master/docs/rtdb/… — Constantin Beer
– Constantin Beer, Commented Aug 31, 2019 at 5:14

Constantin Beer · Accepted Answer · 2019-08-31 06:20:29Z

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

answered Aug 31, 2019 at 6:20

Constantin Beer

5,9136 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joel Carter Over a year ago

I have a version of this, but slightly different. I'm working on fixing a bug when the addToCart button is clicked now

Collectives™ on Stack Overflow

Unable to use interface with AngularFirebase

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related