Question

我正在研究一个使用angular和django开发的购物车项目。添加产品时，我想更新产品的数量。但是现在刷新页面时会更新数量。

下面的代码到目前为止，我已经尝试过了。

Home.Component.ts：

    async ngOnInit() {
    await this.getUpdatedCart();}

    ngOnDestroy() {
    this.subscription.unsubscribe();}

     async getUpdatedCart() {
      await this.cartService.getCart(this.products);
      this.subscription =  this.cartService.updatedCart
      .subscribe(cart => {
       this.cart = cart;
       console.log('cart', this.cart);
     });
  }

shopping-cart.services.ts：

   updatedCart = new BehaviorSubject<any>('');

    async getCart(product) {
    const cartId = JSON.parse(localStorage.getItem('cartId'));
    if (cartId) {
       this.http.get(this.globalService.baseUrl + 'shopping-cart/' + cartId + '/').subscribe(data => this.updatedCart.next(data));
    }}

product-card.component.ts：

     export class ProductCardComponent {
     @Input('product') product;
     @Input('shopping-cart') shoppingCart;

     constructor(private cartService: ShoppingCartService,
              private homeComponent: HomeComponent) {
    }

    async addToCart(product) {
    await this.cartService.addProductToCart(product);
    await this.homeComponent.getUpdatedCart();
  }

    getQuantity() {
     if (!this.shoppingCart) {
      return 0;
     }
     const item = this.shoppingCart.carts;
     for (let i = 0; i < item.length; i++) {
      if (item[i].product === this.product.id) {
        return item[i].qty;
      }
    }
    return 0;}}

product-card.component.html：

  <div class="card-footer">
   <button (click)="addToCart(product) " class="btn btn-primary btn- 
    block">Add to cart</button>
       <div>{{getQuantity() }}</div>
    </div>
   </div>

我希望当用户单击“添加到购物车”按钮时，数量将被更新。但单击两次按钮后，数量会更新。

Answer 1

在这种情况下

使用主题（Example）。在 shopping-cart.services.ts 中进行服务，然后从那里获取购物车数据。订阅该购物车，您将获得更新的购物车。

将产品添加到购物车后如何更新产品数量？

1 个答案: