问题
I am working on the Ionic Ecommerce App and It has a Wishlist button for all the products. The user can only wishlist the product after login and if the user is not login it will the user a popup message. But the problem is that when the user wishlist the product by clicking on the heart and again the user will come on the product page and wishlist product is not showing the product wish-listed.
This is my 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>
In this view, I am showing the wishlist button as a heart-outline.
This is my 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;
}
}
In this ts file, If the user is not login it will show the popup message and if the user is login it can wishlist the product. But the problem is that after wishlist the product and when the user will come to that product, the product is not showing the wishlisted. Like in the image one product is wishlist and the other is not but when the user will come to that wishlist product, it is not showing the product wishlisted. Any help is much appreciated.
This is my wishlist.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();
}
}
This is my Cart Service: 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);
}
}
For Reference: Like reaction in each element in ionic 3
回答1:
Try this
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();
}
});
}
Try to assign false for non logged in users.
Edit
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 => {});
}
Hope this will helps.
来源：https://stackoverflow.com/questions/54324522/my-wishlisted-product-is-not-showing-wishlisted-for-the-login-user-in-ionic