javascript - 随着我增加产品数量，购物车中的价格也应该更新

Question

我目前正在开发 Angular 8 应用程序。我想根据购物车中的商品数量增加购物车中的总金额。但是目前发生的情况是，当我增加数量时，购物车中的价格保持不变。任何帮助将不胜感激。谢谢你！

以下是图片以获得进一步的帮助。

我的 HTML 代码

<div class="modal-footer padding-10">
        <a href="javascript:void(0);" (click)="addToCart(filteredRecipe,'isExtra')"
           class="btn-second btn-submit">Add to Cart
          <span *ngIf="recipeTotal!=0">{{recipeTotal | currency :'GBP':'symbol':'1.2-2'}}</span>
        </a>
      </div>

   <div class="u-line">
      <div class="product-quantity padding-10"><span class="text-light-black fw-700 fs-16">Quantity</span>
        <div class="input-group quantity">
          <div class="input-group-append">
            <button (click)="quantityControl('-')" class="minus-btn" type="button" name="button">
              <i class="fas fa-minus"></i>
            </button>
          </div>
          <input type="text" class="text-center" [(ngModel)]="quantity" name="quantity" value="1" style="font-size: 18px; font-weight: bold;">
          <div class="input-group-prepend">
            <button (click)="quantityControl('+')" class="plus-btn" type="button" name="button"><i
              class="fas fa-plus"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

我的 TS 代码

  quantityControl(flag) {

    if (flag == '+') {
      this.quantity = this.quantity + 1;
      if (this.filteredRecipe.RecipePrice != null) {
        this.recipeTotal = this.recipeTotal + this.filteredRecipe.RecipePrice;
      }
    } else {
      if (this.quantity != 1) {
        this.quantity = this.quantity - 1;
        if (this.filteredRecipe.RecipePrice != null) {
          this.recipeTotal = this.recipeTotal - this.filteredRecipe.RecipePrice;
        }
      }
    }
  }

标签： javascripthtmlangulartypescriptangular8