尽管从服务调用收集的产品显示在页面上，但接口日志未定义

Question

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

我正在尝试将数据放入 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;
}

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

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

上述 sn-p 的目标是将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 });
        }
    })
}

编辑：用于绑定到addToCart的HTML

<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() 方法。

谢谢

Answer 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$)
}