更新本地存储中的值并显示在网页上，无需刷新页面

Question

我目前正在从事 Angular 8 项目。 我有一个变量“cartproductitems”，我希望它在用户将新产品添加到购物车时立即更新此变量。 这样它在购物车中的商品数量就得到了更新。 一切正常，除非每次用户将新产品添加到购物车时我都必须刷新我的页面。

我的 HTML 代码

   <div class="fw-700 mainNavCol" *ngIf="brand_Name!='Pipasha Restaurant'">
        <div class="fa-4x" style="position: relative !important;">
            <button class="btn-cart" (click)="callCheckout()"><i class="fa fa-shopping-cart"></i>
              <span class="hidden-phone">My Trolley</span>
            </button>
            <span class="fa-layers-counter" style="background:Tomato; font-size: xx-large;">{{(""+cartProductItems)?.length}}</span>
        </div>
      </div>

我的 TS 代码

cartProductItems: number;
this.cartProductItems = this._requestService.getProductCartItems();
    console.log('cartProductItems -> '+this.cartProductItems);
  callCheckout() {
    let isTable: boolean = JSON.parse(this._local.get('isTable'));
    if(isTable){
      this._requestService.tableCheckout(this.cartProductItems);
    }
    else{
      this._requestService.checkout(this.cartProductItems);
    }
    console.log('callCheckout -> isTable -> '+isTable);
  }

Answer 1

您是否尝试将按钮设置为按钮类型？ 如果没有定义，至少有一些浏览器使用它们作为提交，这可能会导致对服务器的请求。