切换一个图标按钮会切换我组件中的所有图标按钮

Question

我正在使用 laravel 中制作的 API 进行 Ionic 电子商务项目，但问题是，我制作了一个心愿单按钮，当我点击单个产品上的心愿单按钮时，它会点击所有的心愿单按钮。

这是我的productdetails.html：

<ion-header>

  <ion-navbar>
    <ion-title>Products</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
<ion-row align-items-center justify-content-center class="mynewr11">
 <ion-col *ngFor="let product of this.pdeta" col-5 class="mynewcol22">
  <img class="myimg11" src="{{product.image}}" />
  <p>{{ product.product_name }}</p>
  <p><strong>Price:</strong> ₹{{ product.product_actual_price * product?.count }}</p>
  <ion-col class="qty">
    <button (click)="decreaseProductCount(product)" clear ion-button small color="dark" class="mynewbtn11">
      -
    </button>
    <button ion-button small clear color="dark" class="mynewbtn11">
      {{product?.count}}
    </button>
    <button (click)="incrementProductCount(product)" clear ion-button small color="dark" class="mynewbtn11">
      +
    </button>
</ion-col>
  <button class="mybtn11" (click)="addToCart(product)" ion-button small>
    Add to Cart
  </button>
  <button ion-button icon-only class="wish-list-btn card" *ngIf="!heart_clicked" (click)="addtoWishlist(true,product)" color="light" class="mywisbtn11">
    <ion-icon name="heart-outline"></ion-icon>
  </button>
  <button ion-button icon-only class="wish-list-btn card" *ngIf="heart_clicked" (click)="addtoWishlist(false,product)" color="light" class="mywisbtn11">
    <ion-icon name="ios-heart"></ion-icon>
  </button>
 </ion-col>
</ion-row>
</ion-content>

在此html，我展示了所有产品。

这是我的productdetails.ts:

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


@IonicPage()
@Component({
  selector: 'page-productdetails',
  templateUrl: 'productdetails.html',
})
export class ProductdetailsPage {
  heart_clicked: boolean = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, private cartService: CartProvider, public toastCtrl: ToastController) 
  {}

  decreaseProductCount(product) {
    if(typeof product.count === 'undefined') {
       product.count = 1;
    }
    if (product.count > 1) {
      product.count--;
    }
  }

  incrementProductCount(product) {
    if(typeof product.count === 'undefined') {
       product.count = 1;
    }
    product.count++;
  }

  addtoWishlist(a,product){
    if(a==true){
      this.heart_clicked=true;
    }else
    {
        this.heart_clicked=false;
    }
  }
}

在这张图片中，当我点击一个心愿单按钮时，它会检查所有心愿单按钮。非常感谢任何帮助。

Answer 1

你的问题

根据相同的组件变量 heart_clicked。

显示页面上的所有心愿单按钮

<button ion-button icon-only class="wish-list-btn card" *ngIf="!heart_clicked" (click)="addtoWishlist(true,product)" color="light" class="mywisbtn11">
    <ion-icon name="heart-outline"></ion-icon>
</button>
<button ion-button icon-only class="wish-list-btn card" *ngIf="heart_clicked" (click)="addtoWishlist(false,product)" color="light" class="mywisbtn11">
    <ion-icon name="ios-heart"></ion-icon>
</button>

单击任何心愿单按钮时，将调用函数 addtoWishlist()，相应地设置变量 heart_clicked。

heart_clicked: boolean = false;

addtoWishlist(a,product){
    if(a==true){
      this.heart_clicked=true;
    }else
    {
      this.heart_clicked=false;
    }
  }

由于您的所有愿望清单 html 图标都指定了 *ngIf="heart_clicked" 或 *ngIf="!heart_clicked"，因此它们都依赖于相同的组件范围变量。

我的建议

您可以将 heart_clicked 变量添加到 product，这样每个产品的心愿单按钮都有自己的变量 product.heart_clicked。

然后我将 product.heart_clicked 重命名为 product.onWishlist 并根据此变量设置图标显示。那么您只需要模板中的一个按钮即可。

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

toggleOnWishlist(product){
  product.onWishlist = !product.onWishlist;
}

切换一个图标按钮会切换我组件中的所有图标按钮

Switching one icon button switches all icon buttons in my component

html

e-commerce

ionic-framework

ionic3

angular

你的问题

我的建议