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>

在这个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>

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);
  }
}

这是我的购物车服务：提供商>购物车>购物车。ts：

<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>

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);
  }
}

从'@angular/common/http'导入{HttpClient}；
从“@angular/core”导入{Injectable}；
从'@ionic/Storage'导入{Storage}；
const CART_KEY='cartItems'；
const WISH_KEY='wishItems'；
@可注射（）
导出类提供程序{
构造函数（公共http:HttpClient，公共存储：存储）{
log（'Hello CartProvider'）；
}
addToWishlist（ProductWishSet）{
返回此.getWishItems（）。然后（结果=>{
如果（结果）{
如果（！this.containsObject（ProductWishSet，result））{
结果：推送（productwishdet）；
返回此.storage.set（愿望键、结果）；
}否则{
结果：推送（productwishdet）；
返回此.storage.set（愿望键、结果）；
}
}否则{
返回此.storage.set（WISH_键[ProductWishSet]）；
}
})
}
从愿望中移除（productdet）{
返回此.getWishItems（）。然后（结果=>{
if（result&&result.length）{
const newList=result.filter（el=>el.id！==productdet.id）；
返回此.storage.set（愿望键，newList）；
}
})
}
containsObject（对象，列表）：布尔值{
如果（！list.length）{
返回false；
}
if（obj==null）{
返回false；
}
var i；
对于（i=0；i

问题是：当我再次列出产品时，它会在愿望列表页面中创建重复的产品；当我取消选中愿望列表按钮时，它会在愿望列表页面中添加相同的产品；当我取消选中愿望列表按钮时，它也会从愿望列表页面中删除产品。非常感谢您的帮助。

检查此方法：

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 {
        this.presentAlert();
      }
    });
  }

在将产品添加或删除到愿望列表之前，请尝试此检查

Toast消息代码：

let toast = Toast.create({
      message: "Your Message",
      duration: 1000,
      showCloseButton: true,
      closeButtonText: 'Close',
      dismissOnPageChange: true,
    });

尝试上面的代码，并根据您的需求使用任意属性

希望这会有帮助

检查此方法：

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 {
        this.presentAlert();
      }
    });
  }

在将产品添加或删除到愿望列表之前，请尝试此检查

Toast消息代码：

let toast = Toast.create({
      message: "Your Message",
      duration: 1000,
      showCloseButton: true,
      closeButtonText: 'Close',
      dismissOnPageChange: true,
    });

尝试上面的代码，并根据您的需求使用任意属性

---

希望这会有帮助

在

productdetails.ts

页面中，您需要使用标记检查来编写代码添加和删除，否则每次您喜欢/不喜欢您的产品时，它都会添加您的产品。@CodeChanger。你能帮我编码吗，因为我是新来的。那么，您能帮我编写代码吗？在

productdetails.ts

页面中，您需要编写“添加”和“删除”两个代码，并进行标记检查，否则每当您喜欢/不喜欢您的产品时，它都会添加您的产品。@CodeChanger。你能帮我编码吗，因为我是新来的。你能帮我查一下密码吗？谢谢你的回答。它已经解决了我的问题，但是你能帮我处理吐司消息吗，比如添加吐司即将到来，当我取消选中心脏按钮时，吐司消息再次到来，之前的吐司消息仍然存在。那么，如何自动关闭第一个toast。谢谢您的回答。通常toast msg会在一段时间后自动隐藏，为此，您可以设置duration属性来隐藏toast msg。我已经完成了以下代码。toast.OnDidDisclesh（（）=>{this.navCtrl.push（WishlistPage）；}）；检查我的更新答案，我添加了toast msg代码。谢谢你的回答。它已经解决了我的问题，但是你能帮我处理吐司消息吗，比如添加吐司即将到来，当我取消选中心脏按钮时，吐司消息再次到来，之前的吐司消息仍然存在。那么，如何自动关闭第一个toast。谢谢您的回答。通常toast msg会在一段时间后自动隐藏，为此，您可以设置duration属性来隐藏toast msg。我已经完成了以下代码。toast.OnDidDisclesh（（）=>{this.navCtrl.push（WishlistPage）；}）；检查我的更新答案，我添加了toast msg代码。