angular - 我的愿望清单产品未显示 Ionic 中登录用户的愿望清单

问题描述

我正在开发 Ionic 电子商务应用程序，它有一个适用于所有产品的愿望清单按钮。用户只能在登录后将产品加入愿望清单，如果用户未登录，则会弹出一条消息。但问题是，当用户通过点击心并再次将产品加入愿望清单时，用户将进入产品页面并且愿望清单产品未显示产品愿望清单。

这是我的productdetails.html：

<ion-col *ngFor="let product of this.pdeta" col-5 class="mynewcol22">
<button ion-button icon-only class="wish-list-btn card" (click)="toggleOnWishlist(product)" color="light" class="mywisbtn11">
    <ion-icon [name]="product.onWishlist ? 'ios-heart' : 'heart-outline' "></ion-icon>
</button>
</ion-col>

在此视图中，我将心愿单按钮显示为心形轮廓。

这是我的productdetails.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController, AlertController } from 'ionic-angular';
import { CartProvider } from '../../providers/cart/cart';
import { CartPage } from '../cart/cart';
import { Storage } from '@ionic/storage';
import { WishlistPage } from '../wishlist/wishlist';

@IonicPage()
@Component({
  selector: 'page-productdetails',
  templateUrl: 'productdetails.html',
})
export class ProductdetailsPage {
  detailsp: any = [];
  pdeta: any = [];
  items: Object[] = [];
  itemsInCart: Object[] = [];
  selectProduct: any;
  totalPrice: any;
  productCount: number = 1;
  SelectedSize:any;
  cartItems: any[];
  noproducts: boolean = false;
  nosize: boolean = true;
  isenabled: boolean = false;
  hassizenot: boolean = false;
  hassize:boolean = true;
  constructor(public navCtrl: NavController, public navParams: NavParams, private cartService: CartProvider, public toastCtrl: ToastController, private storage: Storage, private alertCtrl: AlertController) {
  this.detailsp = this.navParams.get('productdet'); <!-- I am getting the Products -->
  this.pdeta = this.detailsp.msg;
  }

  toggleOnWishlist(product){
    this.storage.get("ID").then((val) =>
    {
      if(val)
      {
       product.onWishlist = !product.onWishlist;
       console.log(product);
       this.cartService.addToWishlist(product).then((val) => {
        this.presentWishToast(product.product_name);
      });
      }
      else
      {
        this.presentAlert();
      }
    });
  }

  presentWishToast(name: any) {
    let toast = this.toastCtrl.create({
      message: `${name} has been added to wishlist`,
      showCloseButton: true,
      closeButtonText: 'View Wishlist'
    });

    toast.onDidDismiss(() => {
      this.navCtrl.push(WishlistPage);
    });
    toast.present();
  }

  presentAlert() {
    let alert = this.alertCtrl.create({
      title: 'Please Login For Wishlist',
      buttons: ['Dismiss']
    });
    alert.present();
  }

  toggleOnSize(psize){
    psize.onSize = !psize.onSize;
  }

}

在这个 ts 文件中，如果用户未登录，它将显示弹出消息，如果用户登录，则可以将产品列入愿望清单。但问题是，在产品加入愿望清单之后，当用户来到该产品时，产品并没有显示愿望清单。就像图片中的一样，一个产品是愿望清单，另一个不是，但是当用户来到该愿望清单产品时，它不会显示愿望清单中的产品。任何帮助深表感谢。

这是我的愿望清单.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, AlertController, ToastController } from 'ionic-angular';
import { CartProvider } from "../../providers/cart/cart";
import { CartPage } from '../cart/cart';

@IonicPage()
@Component({
  selector: 'page-wishlist',
  templateUrl: 'wishlist.html',
})
export class WishlistPage {
  wishItems: any[] = [];
  isCartItemLoaded: boolean = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, private cartService: CartProvider, public loadingCtrl: LoadingController, private alertCtrl: AlertController, public toastCtrl: ToastController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad WishlistPage');
    this.loadWishItems();
  }

  loadWishItems() {
    let loader = this.loadingCtrl.create({
      content: "Wait.."
    });
    loader.present();
    this.cartService
      .getWishItems()
      .then(val => {
        this.wishItems = val;
        //console.log(val);
        this.isCartItemLoaded = true;
        loader.dismiss();
      })
      .catch(err => {});
  }

  removeWishItem(itm)
  {
    let alert = this.alertCtrl.create({
      title: 'Remove Product',
      message: 'Do you want to remove this product?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            //console.log('Cancel Clicked');
          }
        },
        {
          text: 'Yes',
          handler: () => {
            this.cartService.removeFromWish(itm).then(() => {
              this.loadWishItems();
            });
          }
        }
      ]
    });
    alert.present();
  }

  WishItemToCart(itm)
  {
     //console.log(itm);
     var productPrice = parseInt(itm.product_actual_price);
     let cartProduct = {
      product_id: itm.id,
      name: itm.product_name,
      image: itm.image,
      count: itm.count,
      disprice: itm.product_price,
      discountp: itm.discount,
      productPrice: parseInt(itm.product_actual_price),
      totalPrice: productPrice,
    };
     this.cartService.addToCart(cartProduct).then((val) => {
      this.presentToast(cartProduct.name);
    });
    this.removeWishItem2(itm);
  }

  removeWishItem2(itm)
  {
    this.cartService.removeFromWish(itm).then(() => {
      this.loadWishItems();
    });
  }

  presentToast(name: any) {
    let toast = this.toastCtrl.create({
      message: `${name} has been added to cart`,
      showCloseButton: true,
      closeButtonText: 'View Cart'
    });

    toast.onDidDismiss(() => {
      this.navCtrl.push(CartPage);
    });
    toast.present();
  }
}

这是我的购物车服务：providers>cart>cart.ts：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

const WISH_KEY = 'wishItems';

@Injectable()
export class CartProvider {

  constructor(public http: HttpClient, public storage: Storage) {
    console.log('Hello CartProvider Provider');
  }

  addToWishlist(productwishdet) {
    return this.getWishItems().then(result => {
      if (result) {
        if (!this.containsObject(productwishdet, result)) {
          result.push(productwishdet);
          return this.storage.set(WISH_KEY, result);
        } else {
          result.push(productwishdet);
          return this.storage.set(WISH_KEY, result);
        }

      } else {
        return this.storage.set(WISH_KEY, [productwishdet]);
      }
    })
  }

  removeFromWish(productdet) {
    return this.getWishItems().then(result => {
      if (result && result.length) {
        const newList = result.filter(el => el.id !== productdet.id);
        return this.storage.set(WISH_KEY, newList);
      }
    })
}

  getWishItems() {
    return this.storage.get(WISH_KEY);
  }
}

供参考：离子 3 中每个元素的类似反应

标签： angularionic-frameworkionic3ionic4

尝试这个

toggleOnWishlist(product) {
    this.storage.get("ID").then(val => {
      if (val) {
        if (!product.onWishlist) {
          this.cartService.addToWishlist(product).then(val => {
            this.presentWishToast(product.product_name);
          });
        } else {
          this.cartService.removeFromWish(product).then(val => {
            this.presentWishToast(product.product_name);
          });
        }
        product.onWishlist = !product.onWishlist;
      } else {

        //Add forcefully unlike
        product.onWishlist = false;
        this.presentAlert();
      }
    });
  }

尝试false为未登录的用户分配。

编辑

getproducts($id)
{
          //console.log($id);
          this.restProvider.getproductdetails($id)
          .then(data => {
               updateProductListBasedOnWishList(data);
          });
}

updateProductListBasedOnWishList(products){

    this.cartService
      .getWishItems()
      .then(val => {
        this.wishItems = val;
        products = products.map(item => {
          let item2 = this.wishItems.find(i2 => i2.id === item.id);
          return item2 ? { ...item, ...item2 } : item;
        });

        this.users = products;

        this.navCtrl.push(ProductdetailsPage,
          {
            productdet : this.users,
          });
        });

      })
      .catch(err => {});


  }

希望这会有所帮助。

angular - 我的愿望清单产品未显示 Ionic 中登录用户的愿望清单

问题描述

解决方案

推荐阅读