Angular 每次按下“添加购物车”按钮时，我都试图在产品模板上显示产品数量

每次按下“添加到购物车”按钮时，我希望在product-list.component.html中呈现产品数量计数。它没有显示你在我的代码中看到的数量，我调用了getQuantity方法

product.component.html

       <div class="card" *ngIf="product.payload.val().title "  style="width: 18rem;">
        <img [src]="product.payload.val().imageUrl" class="card-img-top" *ngIf="product.payload.val().imageUrl"  alt="...">
        <div class="card-body">
          <h5 class="card-title">{{product.payload.val().title}}</h5>
          <h5 class="card-title">{{product.payload.val().category}}</h5>
          <p class="card-text">{{product.payload.val().price | currency: symbol-narrow}}</p>
        </div>
        <div class="card-footer">
          <button *ngIf="getQuantity() === 0; else updateQuantity"
           (click)="addToCart()" class="btn btn-primary"> Add to cart</button>
        </div>
        <ng-template #updateQuantity>
       <div class="row no-gutters">
         <div class="col-2"(click)="removeFromCart()" class="btn btn-primary">-</div>
         <div class="col text-center">  {{getQuantity()}} in cart</div>
         <div class="col-2"(click)="addToCart()" class="btn btn-primary">+</div>
       </div>

        </ng-template>
      </div>  

           <div class="card" *ngIf="product.payload.val().title "  style="width: 18rem;">
        <img [src]="product.payload.val().imageUrl" class="card-img-top" *ngIf="product.payload.val().imageUrl"  alt="...">
        <div class="card-body">
          <h5 class="card-title">{{product.payload.val().title}}</h5>
          <h5 class="card-title">{{product.payload.val().category}}</h5>
          <p class="card-text">{{product.payload.val().price | currency: symbol-narrow}}</p>
        </div>
        <div class="card-footer">
          <button *ngIf="getQuantity() === 0; else updateQuantity"
           (click)="addToCart()" class="btn btn-primary"> Add to cart</button>
        </div>
        <ng-template #updateQuantity>
       <div class="row no-gutters">
         <div class="col-2"(click)="removeFromCart()" class="btn btn-primary">-</div>
         <div class="col text-center">  {{getQuantity()}} in cart</div>
         <div class="col-2"(click)="addToCart()" class="btn btn-primary">+</div>
       </div>

        </ng-template>
      </div>


    
  

在这里，我调用了getQuantity方法来检查购物车中是否有，如果没有，则每次按下AddtoCart按钮时都会递增

购物车服务

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { IShoppinCart } from '../models/IShoppingCart';

@Injectable({
  providedIn: 'root'
})
export class ShoppingCartService {


  constructor(private db: AngularFireDatabase) { }

  private create() {
    return this.db.list('/shopping-carts/').push({
      dateCreated: new Date().getTime()
    });
  }

  private async getOrCreateCartId() {
    let cartId = localStorage.getItem('cartId');
    if (cartId) return cartId;


    let result = await this.create();
    localStorage.setItem('cartId', result.key);
    return result.key;
  }

  async getcart(): Promise<AngularFireObject<IShoppinCart>> {
    let cartID = await this.getOrCreateCartId();
    return this.db.object('/shopping-carts/' + cartID);

  }

  private getItem(cartId: string, productID: string) {
    return this.db.object('/shopping-carts/' + cartId + '/items/' + productID);
  }

  async addToCart(product) {
    this.updateToCart(product, 1);
  }

  async removeFromCart(product) {
    this.updateToCart(product, -1);
  }

  async updateToCart(product, quantityState) {
    let cartId = await this.getOrCreateCartId();

    let items$ = this.getItem(cartId, product.key);

    items$.snapshotChanges().take(1).subscribe((item: any) => {
      if (item.payload.exists()) {
        items$.update({ quantity: item.payload.val().quantity + quantityState });
      }
      else {
        items$.update({
          product: {
            title: product.payload.val().title,
            price: product.payload.val().price,
            category: product.payload.val().category,
            imageUrl: product.payload.val().imageUrl
          },

          quantity:(item.payload.exists() ? item.payload.val()['quantity'] : 0) + 1
        });
      }
    })

  }

}

product-list.component.html

       <div class="card" *ngIf="product.payload.val().title "  style="width: 18rem;">
        <img [src]="product.payload.val().imageUrl" class="card-img-top" *ngIf="product.payload.val().imageUrl"  alt="...">
        <div class="card-body">
          <h5 class="card-title">{{product.payload.val().title}}</h5>
          <h5 class="card-title">{{product.payload.val().category}}</h5>
          <p class="card-text">{{product.payload.val().price | currency: symbol-narrow}}</p>
        </div>
        <div class="card-footer">
          <button *ngIf="getQuantity() === 0; else updateQuantity"
           (click)="addToCart()" class="btn btn-primary"> Add to cart</button>
        </div>
        <ng-template #updateQuantity>
       <div class="row no-gutters">
         <div class="col-2"(click)="removeFromCart()" class="btn btn-primary">-</div>
         <div class="col text-center">  {{getQuantity()}} in cart</div>
         <div class="col-2"(click)="addToCart()" class="btn btn-primary">+</div>
       </div>

        </ng-template>
      </div>  

           <div class="card" *ngIf="product.payload.val().title "  style="width: 18rem;">
        <img [src]="product.payload.val().imageUrl" class="card-img-top" *ngIf="product.payload.val().imageUrl"  alt="...">
        <div class="card-body">
          <h5 class="card-title">{{product.payload.val().title}}</h5>
          <h5 class="card-title">{{product.payload.val().category}}</h5>
          <p class="card-text">{{product.payload.val().price | currency: symbol-narrow}}</p>
        </div>
        <div class="card-footer">
          <button *ngIf="getQuantity() === 0; else updateQuantity"
           (click)="addToCart()" class="btn btn-primary"> Add to cart</button>
        </div>
        <ng-template #updateQuantity>
       <div class="row no-gutters">
         <div class="col-2"(click)="removeFromCart()" class="btn btn-primary">-</div>
         <div class="col text-center">  {{getQuantity()}} in cart</div>
         <div class="col-2"(click)="addToCart()" class="btn btn-primary">+</div>
       </div>

        </ng-template>
      </div>


    
  

{{product.payload.val（）.title}
{{product.payload.val（）.category}
{{{product.payload.val（）.price | currency:symbol-slown}
添加到购物车
-
购物车中的{getQuantity（）}}
+

---

在控制台日志中，我看到项目已添加到购物车，但未反映在模板中

我看到product.component.html，但没有看到product-list.component.html。。您也想添加吗？@dre请共享您的product-list.component。html@JGFMK是的，我会分享it@smraj我已经添加了product-list.component.html