在IONIC4中删除项目后重新加载页面

Question

你好，专家在家里。 请目前正在使用 ionic 4 构建电子商务移动应用，当从购物车页面中删除商品时，我无法更新我的商品总计摘要。

下面是我的 cart.html 页面

    <ion-header [translucent]="true">
  <ion-toolbar color="success">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="products"></ion-back-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-icon slot="start" name="cart" [routerLink]="['/cart']"></ion-icon>
      <ion-badge color="primary">{{ cartItem }}</ion-badge>
    </ion-buttons>
    <ion-title>Cart</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content>
  <!--DISPLAY OF NO ITEM -->
  <div *ngIf="cartData.length == 0" class="ion-padding" >
    <ion-row size="12" disabled="true" class="ion-padding">
      <ion-col class="ion-padding-vertical">
        <h5 class="ion-text-center ion-padding-vertical">There is no Item in your cart...!</h5>
        <ion-button expand="block" color="success" [routerLink]="['/products']" class="ion-text-capitalize" style="font-size: 18px;">Browse farms</ion-button>
      </ion-col>
    </ion-row>
  </div>
  <!--DISPLAY OF NO ITEM --> 
  <ion-card>
    <ion-list *ngIf="cartData.length > 0" >
      <ion-list-header>
        <ion-label class="headerTitle">Items in cart</ion-label>
        <ion-button [routerLink]="['/products']" >
          <ion-icon slot="icon-only"   name="add-circle" class="add_icon" color="success"></ion-icon>
        </ion-button>
      </ion-list-header>


      <ion-item *ngFor="let item of cartData; let j = index" >
        <ion-thumbnail slot="start">
          <img [src]="item.images[0].src">
        </ion-thumbnail>
        <ion-label>
          <h4>{{ item.name }}</h4>
          <p>Amount: <span style="color: rgb(26, 185, 26); font-weight: 400; font-size: 17px;">₦{{ baseProducts[j].price * baseProducts[j].quantity | number:'1.0-0'}}</span></p>
          <p >Returns: ‎₦{{ item.meta_data[1].value * baseProducts[j].quantity | number:'1.0-0' }}</p>
          <!--<ion-item>
           <ion-icon name="remove" class="decrement" (ionChange)="changeCartItemQty(baseProducts[j])"></ion-icon><span>{{ quantityValue }}</span><ion-icon (click)="increment()" name="add" class="increment"></ion-icon>
          </ion-text>-->  
          <ion-item>
            <ion-label>Change Quantity</ion-label>
              <ion-select value="brown" 
              okText="Okay" 
              cancelText="Dismiss" 
              [(ngModel)]="baseProducts[j].quantity" 
              (ionChange)="changeCartItemQty(baseProducts[j])">
                <ion-select-option value="1">1</ion-select-option>
                <ion-select-option value="2">2</ion-select-option>
                <ion-select-option value="3">3</ion-select-option>
                <ion-select-option value="4">4</ion-select-option>
                <ion-select-option value="5">5</ion-select-option>
                <ion-select-option value="6">6</ion-select-option>
                <ion-select-option value="7">7</ion-select-option>
                <ion-select-option value="8">8</ion-select-option>
                <ion-select-option value="9">9</ion-select-option>
                <ion-select-option value="10">10</ion-select-option>
              </ion-select>
            </ion-item>
        </ion-label> 

        <ion-button color="danger" (click)="removeFromCart(j, item)">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-button>
      </ion-item>
    </ion-list>

  </ion-card>


</ion-content>


<ion-footer *ngIf="cartData.length > 0" [routerLink]="['/checkout']">
  <ion-list >
    <ion-item >

小计

₦{{ 计算价格() |数字：'1.0-0'}} 总付款 ₦{{ 计算价格() |数字：'1.0-0' }}

  <ion-button expand="full" color="success"  class="ion-text-capitalize">Proceed to checkout <ion-icon slot="end" name="arrow-forward-outline"></ion-icon></ion-button>
</section>

</ion-footer>

我的 cart.ts 文件

import { Storage } from '@ionic/storage';
import { Component, OnInit } from '@angular/core';
import { CartserviceService } from '../services/cartservice.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.page.html',
  styleUrls: ['./cart.page.scss'],
})
export class CartPage implements OnInit {

  /* use below 4 variables at beginning so that cart page html works properly */
  cartData:any = [];
  baseProducts:any = [];
  totalPrice: number = 0;
  show: boolean = true;
  cartItem: number = 0;
  quantityValue:number = 1;

  constructor(private storage: Storage, private cart: CartserviceService) {
    this.cart.keepCartItemsOnRefresh();

    // products added to carts  
    this.storage.forEach((data)=>{
      let storedProducts = {};
      this.cart.keepCartItemsOnRefresh();
      let parseFromStorage = JSON.parse(data);
      this.cartData.push(parseFromStorage);
      storedProducts['product_id'] = parseFromStorage.id;
      storedProducts['price'] = parseFromStorage.price;
      storedProducts['quantity'] = 1;
      this.baseProducts.push(storedProducts);
    }).then(()=>{
      console.log('parse-prudcts', this.baseProducts)
    });
   }

  ngOnInit() {
    this.cart.cartItems.subscribe((value) =>{
      this.cartItem = value;
    });
  }



    //update in products

    changeCartItemQty(currentItem){
      this.baseProducts.forEach((productToUpdate) => {
        if(productToUpdate.product_id == currentItem.product_id){
          productToUpdate.quantity = parseInt(currentItem.quantity);
        }
      });
      this.cart.quantityUpdatedProducts = this.baseProducts;
      console.log('Changed Quantity on cart',this.cart.quantityUpdatedProducts);
    }
  // Delete item from cart
  removeFromCart(index, item){
  this.cartData.splice(index,1);
  let pId = item.id;
  this.storage.remove(`product_${pId}`);
  this.cart.keepCartItemsOnRefresh();

  }



  // calulate farm price
  calculatePrice(){
    this.totalPrice = 0;
    let farmPrice = 0;
    this.baseProducts.forEach((product)=>{
    farmPrice = product.price * product.quantity;
    this.totalPrice += farmPrice;
   });
   return this.totalPrice   
  } 
}

当我从购物车中删除商品时，我希望商品总数更新为购物车中的当前商品总数

Answer 1

如果您想重新加载整个页面，您可以使用“window.location.reload()”，或者如果您只想更新数据，您可以在删除后调用特定的 API。