Question

我做了一个有角度的购物车，我将产品保存到本地存储中，这是我的AppService.ts

addtocart(userproduct:Product,quantity:number){
     //calling get products in local stored cart to fetch product
    const storedcart:Cart[]= this.getproducts();
    //checking if the incoming product is already there
    let item = storedcart.find(p => p.product.id == userproduct.id); 
    //if incoming product is not there
    if (item === undefined) {
        //creating a new cart element
        const newcart:Cart={product:userproduct,quantity:quantity};
        //pushing that product in already stored cart
        storedcart.push(newcart);
        //saving the cart again
        this.storage.set(this.key, storedcart);//saving cart to the local storage

    }
    //if the product existsthen just increaing the quantity of item
   else{
    item.quantity += quantity;
    //and saving the cart again to local browser storage
    this.storage.set(this.key, storedcart);//saving cart to the local storage
    console.log("Quantity of the product increased");

   }



  console.log(this.storage.get(this.key));

 }

此功能在我的产品组件中使用

export class ProductsComponent   {
  products :Product[]=[
{id:"xy1",name:"SSR-3000-15-POS-TERMINAL",picture:"a.jpg",price:1375,category:"screentills"},
{id:"xy2",name:"SSR-T86E SCALE",picture:"b.jpg",price:1,category:"cashregister"},
{id:"xy3",name:"SSR-300-RECEIPT-PRINTERS",picture:"c.jpg",price:451,category:"printers"},
{id:"xy5",name:"EPSON-DOT-MATRIX-PRINTER",picture:"d.jpg",price:560,category:"kitchenprinter"},
{id:"xy6",name:"EPSON-DOT-MATRIX-PRINTER",picture:"d.jpg",price:560,category:"cashdrawers"},
{id:"xy7",name:"EPSON-DOT-MATRIX-PRINTER",picture:"d.jpg",price:560,category:"barcodescanner"},
{id:"xy8",name:"EPSON-DOT-MATRIX-PRINTER",picture:"d.jpg",price:560,category:"accessories"},


  ];
  //
  //dependency injection of appservice
  constructor(private appservice:AppService) { }

  addproduct(product){
    this.appservice.addtocart(product,1);

  }




}

现在要检索产品数量，我可以从我的appservice中使用此功能

gettotalproducts(){
    //getting stored cart from total products saved in local storage
    const storedcart:Cart[]= this.getproducts();

    //checking if products exist in cart then only returning size
     if(storedcart != null){
        this.cartsize=storedcart.length;
        return this.cartsize;
     }
     //else returning zero
    else{
        this.cartsize=0;
        return this.cartsize;
    }

我的标题组件中有一个购物车图标，其中显示了全部商品

export class HeaderComponent implements OnInit {

  //totalproducts:number;
  constructor(private appservice:AppService) { }
  totalproducts= this.appservice.gettotalproducts();

  ngOnInit() {

  }

}

这是header.component.html的HTML代码段，用于显示总计

<li class="checkout">
                <a routerLink="/cart">
                  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                  <span id="checkout_items" class="checkout_items">{{totalproducts}}</span>
                </a>
              </li>

产品成功添加到购物车，我也获得了数量，但我必须

刷新页面

每次我想在购物车图标中查看更新的数量时，任何想法都可以在不刷新页面的情况下进行，例如当我将产品添加到购物车时它会自动更新购物车图标编号，我在ngOninit中尝试了此功能，但没有成功我对angular还是比较陌生，因此任何帮助将不胜感激

如何在不刷新页面的情况下自动更新有角度的购物车中的产品数量

0 个答案: