0

这个问题是对此处发布的上一个问题的后续 - 上一个问题

我正在尝试将数据放入 firebase 数据库（特别是实时数据库），并且我编写了一个服务，该服务将获取我当前的所有产品，然后将其用于创建购物车的方法中。

但是，尽管我可以在视图上获取和显示产品，但我的服务继续返回未定义的结果。

我试图手动将我的数据放入一个接口，但每次我登录到控制台时，我都会得到undefined.

此服务方法用于从 firebase 数据库中检索产品：

getAll() {
    this.itemRef = this.db.list('/products').snapshotChanges().pipe(
        map(changes => {
            return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
        })
    );
    return this.itemRef;
}

下面的代码片段显示了我在组件内部尝试完成的工作。

products$: Observable<ProdInterface>;
prodLook: ProdInterface[]

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

this.productService.getAll().subscribe(data =>
    this.prodLook = [{
        color_way: data.color_way,
        description: data.description,
        $key: data.key,
        name: data.name,
        photo: data.photo,
        price: data.price,
        qty: data.qty
    }]
)

上面代码片段的目标是传递products$给这个方法：

//product returns undefined
async addToCart(product: ProdInterface, change: number) {
    let cartId = await this.getOrCreateCart();
    debugger
    let item$ = this.getItem(cartId, product.$key);
    item$.snapshotChanges().pipe(take(1)).subscribe(item => {

        if (item.payload.exists()) {
            let quantity = item.payload.exportVal().quantity + change;
            if (quantity === 0) item$.remove();
            else
                item$.update({
                    product: item.payload.exportVal(),
                    quantity: quantity
                });
        } else {
            item$.set({ product: item.payload.exportVal(), quantity: 1 });
        }
    })
}

编辑：用于绑定的 HTMLaddToCart

<div *ngIf='products$'>
  <div class="row">
    <div class="col-md-4" *ngFor="let product of products$ | async">
      <mdb-card>
        <!--Card image-->
        <mdb-card-img [src]="product.photo" alt="Card image cap"></mdb-card-img>
        <!--Card content-->
        <mdb-card-body>

          <!--Title-->
          <mdb-card-title>
            <h4>{{product.name}}</h4>
          </mdb-card-title>

          <!--Text-->
          <mdb-card-text> 
            {{product.description}}
          </mdb-card-text>
          <span> 
            <mdb-card-text>{{product.price}}</mdb-card-text>
          </span>

        <button (click)="addToCartProd()" class="btn btn-primary btn-block">Add To Cart</button>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

与 HTML 一起使用的 addToCartProd 方法

  // addToCartProd(){
  //   this.cartService.addToCart(this.products$,1)
  //   console.log(this.products$)
  // }

我对这段代码的目标是附加addToCart到视图上的一个按钮，并根据它的键将正确的产品发送到数据库。当前实现发送undefined到数据库，这是造成混淆的原因，因为产品使用相同的getAll()方法显示在页面上。

谢谢

4

1 回答 1

1

您的模板应该product从传递*ngFor到addToCardProd()。您的模板和方法应如下所示。

products.component.html

<div *ngIf='products$'>
  <div class="row">
    <div class="col-md-4" *ngFor="let product of products$ | async">
      <mdb-card>
        ...
        <button (click)="addToCartProd(product)" class="btn btn-primary btn-block">Add To Cart</button>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

products.component.ts

addToCartProd(product: ProdInterface){
  this.cartService.addToCart(product,1)
  console.log(products$)
}
于 2019-08-31T21:49:10.200 回答