Javascript 更新本地存储中的值，并在网页上显示该值，而不刷新网页

我目前正在从事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>

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

---

您是否尝试将按钮类型设置为“按钮类型”？如果未定义任何内容，则至少某些浏览器将其用作提交，这可能会导致向服务器发出请求。

请使用添加产品的代码更新问题