Question

在尝试创建有角度的购物车时，我遇到了有关组件和服务的类型问题。我的服务当前返回AngularFireList<{}>，尽管我可以更改其类型，但这样做会对其他方法和组件内部产生副作用。我想知道是否有一种有效的方法可以让我当前的界面成为类型。

我尝试将类型强制转换为Observable<ProdInterface>，这再次解决了一个问题，同时又引入了另一个问题。

我当前的界面是：

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

我正在寻求实现此方法，以便保留$key，这将允许我在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 });
    });
}

从firebase数据库中获取所有产品将返回Observable<{}>类型，该类型不具有$key方法所需的addToCart属性

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

这意味着在使用该方法时返回错误的类型：

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

我的最终目标是可以将当前返回的getAll()类型映射到我的ProdInterface，以便可以在我的addToCart方法中使用它。

我会向正确的方向提供指导。

谢谢！

Answer 1

使用Firebase docs中的示例，您可以尝试以下操作：

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

无法与AngularFirebase一起使用界面

1 个答案: