Question

我正在使用Ionic电子商务应用程序，正在显示购物车中具有尺寸的产品，有些产品具有尺寸，有些产品没有尺寸，但是问题是没有尺寸的产品在购物车中显示尺寸标签。

这是我的 cart.html ：

<p *ngIf="ifSize">Size: {{itm?.psize}}</p>

在此视图中，我正在显示产品的尺寸。

这是我的购物车：

import { CheckoutPage } from './../checkout/checkout';
import { Component, ChangeDetectorRef } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';
import { CartProvider } from "../../providers/cart/cart";

@IonicPage()
@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
})
export class CartPage {
 cartItems: any[] = [];
 totalAmount: number = 0;
 isCartItemLoaded: boolean = false;
 isEmptyCart: boolean = true;
 ifSize: boolean = true;
 productCount: number = 1;
  constructor(public navCtrl: NavController, public navParams: NavParams, private cartService: CartProvider, public loadingCtrl: LoadingController, private alertCtrl: AlertController, private cdr: ChangeDetectorRef) {
  }

  ionViewDidLoad() {
    this.loadCartItems();
  }

  loadCartItems() {
    let loader = this.loadingCtrl.create({
      content: "Wait.."
    });
    loader.present();
    this.cartService
      .getCartItems()
      .then(val => {
        this.cartItems = val;
        console.log(val);
        if(val.psize === undefined)
        {
        this.ifSize = false;
        }
        if (this.cartItems.length > 0) {
          this.cartItems.forEach((v, indx) => {
            this.totalAmount += parseInt(v.totalPrice);
          });
          this.cdr.detectChanges();
          this.isEmptyCart = false;
        }
        this.isCartItemLoaded = true;
        loader.dismiss();
      })
      .catch(err => {});
  }
}

在此ts文件中，默认情况下，它将显示所有产品的尺寸，而没有该尺寸标签的产品将隐藏。但是问题是console.log（val）;像一系列产品一样来。因此，我无法找到阵列中产品的尺寸，也无法为产品阵列中的尺寸应用正确的条件。任何帮助深表感谢。 结果：

console.log（val）;

Answer 1

val.psize在您的情况下不返回任何内容，因为您需要val[0].psize, val[1].psize等等。要解决此问题，请删除此问题：

 if(val.psize === undefined)
        {
         this.ifSize = false;
        }

在此处添加v.psize，然后像这样检查foreach：

if (this.cartItems.length > 0) {
          this.cartItems.forEach((v, indx) => {

    //---Add here 
            if(v.psize===undefined){
              this.ifSize = false;
            }else{
              this.ifSize = true;
            }
    //---
            this.totalAmount += parseInt(v.totalPrice);
          });
          this.cdr.detectChanges();
          this.isEmptyCart = false;
        }

然后您的代码应该可以按预期工作

修改：也许您在看这个，我有点困惑：

<p *ngIf="itm?.psize!== undefined">Size: {{itm?.psize}}</p>

在Ionic App中根据购物车中的产品显示尺寸

1 个答案: