angular - Nu se poate folosi interfața cu AngularFirebase


În timp ce încercam să creez un coș de cumpărături în Angular, m-am lovit de probleme de tip legate de componentele și serviciile mele. Serviciul meu returnează în prezent AngularFireList<{}> și, deși pot să-i schimb tipul, aceasta are efecte secundare în alte metode și în interiorul componentei mele. Mă întreb dacă există o modalitate eficientă de a permite interfeței mele actuale să devină tipul.

Am încercat să convertesc tipul în Observable<ProdInterface>, ceea ce din nou, rezolvă o problemă în timp ce aduce alta.

Interfața mea actuală este:

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

Încerc să implementez această metodă astfel încât să pot păstra $key, ceea ce îmi va permite să găsesc un element în baza mea de date 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 });
    });
}

Obținerea tuturor produselor mele din baza de date Firebase returnează un tip Observable<{}> care nu are atributul $key de care am nevoie pentru metoda mea addToCart

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

Ceea ce înseamnă că atunci când se folosește metoda, este returnat tipul greșit:

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

Scopul meu final este astfel încât să pot mapa tipul returnat curent al getAll() la ProdInterface astfel încât să îl pot folosi apoi în interiorul metodei mele addToCart.

Aș aprecia orice îndrumare în direcția corectă.

Mulțumesc!

Răspuns #1

Cu exemplul din documentația Firebase ai putea încerca asta:

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