盡管從服務呼叫中收集的產品顯示在頁面上，但接口日志未定義

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

下面的代碼片段顯示了我在組件內部嘗試完成的工作。

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

編輯：用於綁定到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$)
}