Я работаю над приложением Ionic Ecommerce, и у меня есть список желаемых продуктов, но проблема в том, что, когда я снова создаю список желаемых продуктов, он создает дублирующийся продукт на странице списка желаний, а когда я снял флажок с кнопки списка желаний, он добавляет тот же самыйпродукт на странице списка желаний, и когда я снял флажок с кнопки списка желаний, он также должен удалить продукт со страницы списка желаний.
Это мой 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.t s:
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 = [];
cartItems: any[];
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');
this.pdeta = this.detailsp.msg;
}
ionViewDidEnter(){
this.getSingleProduct();
}
toggleOnWishlist(product){
this.storage.get("ID").then((val) =>
{
if(val)
{
product.onWishlist = !product.onWishlist;
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();
}
}
В этом файле TS я сделалtoggleOnWishlist функция, которая добавит продукт на страницу списка желаний.
Это мой wishlist.html :
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Your Wishlist</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list *ngFor="let itm of wishItems" class="myitem11">
<ion-item>
<ion-thumbnail item-start>
<img src="{{itm.image}}">
</ion-thumbnail>
<h2>{{itm.product_name}}</h2>
<p>
Actual Price:
<span [ngStyle]="itm?.discount === '0' ? {'text-decoration':'none'} : {'text-decoration':'line-through'}">₹{{itm.product_price}}</span>
</p>
<p>Discount: {{itm?.discount}}%</p>
<p>
Discounted Price: ₹{{itm.product_actual_price}}
</p>
<button ion-button icon-only clear item-end (click)="removeWishItem(itm)">
<ion-icon class="mycaicon11" name="ios-trash-outline"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-content>
В этом представлении я показываютовары из списка желаний с кнопкой удаления.
Это мой wishlist.t s:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';
import { CartProvider } from "../../providers/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) {
}
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: () => {
}
},
{
text: 'Yes',
handler: () => {
this.cartService.removeFromWish(itm).then(() => {
this.loadWishItems();
});
}
}
]
});
alert.present();
}
}
Это мой сервис корзины: Поставщики> Корзина>cart.ts :
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
const CART_KEY = 'cartItems';
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);
}
})
}
containsObject(obj, list): boolean {
if (!list.length) {
return false;
}
if (obj == null) {
return false;
}
var i;
for (i = 0; i < list.length; i++) {
if (list[i].product_id == obj.product_id) {
return true;
}
}
return false;
}
getWishItems() {
return this.storage.get(WISH_KEY);
}
}
Проблема в том, что: когда я снова создаю список желаемых товаров, он создает дублирующийся товар на странице списка желаний, а когда я не отмечал кнопку списка желаний, он добавляет тот же товар.на странице списка пожеланий, и когда я снял флажок с кнопки списка желаний, он также должен удалить продукт со страницы списка желаний.Любая помощь очень ценится.