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

Question

我正在使用 laravel 制作的 API 处理 Ionic Ecommerce 项目，但问题是，我制作了一个愿望清单按钮，当我单击单个产品上的愿望清单按钮时，它会单击所有愿望清单按钮。

这是我的 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;
}