Переключение одной кнопки со значком переключает все кнопки со значками в моем компоненте - PullRequest
Новая
       20

Переключение одной кнопки со значком переключает все кнопки со значками в моем компоненте

0 голосов
/ 10 января 2019

Я работаю над проектом Ionic Ecommerce с использованием API, созданного в laravel, но проблема в том, что я создал кнопку списка желаний, и когда я нажимаю кнопку списка желаний на одном продукте, он нажимает кнопку всего списка желаний.

Это мой 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;
    }
  }
}

enter image description here

На этой картинке, когда я нажимаю на одну кнопку списка желаний, она проверяет все кнопки списка желаний. Любая помощь очень ценится.

1 Ответ

0 голосов
/ 10 января 2019

Ваша проблема

Все ваши кнопки списка желаний отображаются на странице в зависимости от одной и той же переменной компонента 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;
}
...