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

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