尽管从服务调用中收集的产品显示在页面上，但界面记录为未定义

Question

此问题是此处发布的先前问题的后续问题 --

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

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

我试图将我的数据手动放入一个界面，但每次我登录到控制台时，我都会得到 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 });
        }
    })
}

编辑：HTML 用于绑定到 addToCart

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

尽管从服务调用中收集的产品显示在页面上，但界面记录为未定义

Interface logs as undefined though the products gathered from service call display on page

angular

typescript

firebase-realtime-database

interface

angularfire5

products.component.html

products.component.ts