Question

我正在使用Ionic电子商务应用程序，已经添加了产品尺寸，但问题是，如果产品具有4种尺寸，则用户可以选择4种尺寸，但这是错误的。用户只能选择一种尺寸并将其移动到购物车，但问题是该尺寸没有添加到购物车中。

这是我的 productdetails.html ：

<ion-header>

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

</ion-header>


<ion-content padding>
<ion-row align-items-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>Actual Price:</strong>
    <span [ngStyle]="product.discount === '0' ? {'text-decoration':'none'} : {'text-decoration':'line-through'}">
      ₹{{product.product_price * product?.count}}
    </span>
  </p>
  <p><strong>Discount:</strong> {{product.discount}}%</p>
  <p><strong>Discount 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 *ngFor="let psize of product.product_size" (click)="toggleOnSize(psize)" [ngClass]="psize.onSize ? 'mynewbtn22' : 'newbtn11' " ion-button small>
  {{ psize.size }}
</button>

  <button class="mybtn11" (click)="addToCart(product)" ion-button small>
    Add to Cart
  </button>
  <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>
</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 {
  detailsp: any = [];
  pdeta: any = [];
  items: Object[] = [];
  itemsInCart: Object[] = [];
  selectProduct: any;
  totalPrice: any;
  productCount: number = 1;
  cartItems: any[];
  noproducts: boolean = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, private cartService: CartProvider, public toastCtrl: ToastController) {
    this.detailsp = this.navParams.get('productdet');
    this.pdeta = this.detailsp.msg;
    this.pdeta.forEach(product => product.count = 1);
    console.log(this.detailsp);
    if(this.detailsp.msg.length === 0)
    {
      this.noproducts = true;
    }
    if (this.navParams.get("productdet")) {
      window.localStorage.setItem('ProductdetailsPage', JSON.stringify(this.navParams.get("productdet")));
    }
  }

  ionViewDidEnter(){
    this.getSingleProduct();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProductdetailsPage');
    this.selectProduct = this.navParams.get("productdet");
    this.cartService.getCartItems().then((val) => {
      this.cartItems = val;
    })
  }

  getSingleProduct() {
    if (window.localStorage.getItem('productdet') != 'undefined') {
      this.selectProduct = JSON.parse(window.localStorage.getItem('productdet'))
    }
  }

  addToCart(detailsp) {
    var productPrice = this.productCount * parseInt(detailsp.product_actual_price);
    let cartProduct = {
      product_id: detailsp.id,
      name: detailsp.product_name,
      image: detailsp.image,
      count: detailsp.count,
      psize: detailsp.size,
      disprice: detailsp.product_price,
      discountp: detailsp.discount,
      productPrice: this.productCount * parseInt(detailsp.product_actual_price),
      totalPrice: productPrice,
    };
    console.log(cartProduct);
    this.cartService.addToCart(cartProduct).then((val) => {
      this.presentToast(cartProduct.name);
    });
  }

  presentToast(name: any) {
    let toast = this.toastCtrl.create({
      message: `${name} has been added to cart`,
      showCloseButton: true,
      closeButtonText: 'View Cart'
    });

    toast.onDidDismiss(() => {
      this.navCtrl.push(CartPage);
    });
    toast.present();
  }

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

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

  toggleOnSize(psize){
    psize.onSize = !psize.onSize;
}
}

在此文件中，有两个函数与大小相关：addToCart（detailsp）和toggleOnSize（psize）。但是问题是，当我控制台console.log（cartProduct）时，它显示psize未定义，因为我无法选择大小并将其发送给addToCart函数。非常感谢您的帮助。

在此图像中，我显示的问题是用户可以选择所有大小，而当我管理数据时，它显示未定义的psize。非常感谢您的帮助。

Answer 1

定义product.SelectedSize：any并在各处使用它来获取尺寸，就像获取产品的任何其他属性一样

无法在Ionic App中将产品尺寸添加到购物车

1 个答案: