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

Question

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

这是我的 cart.html：

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

在这个视图中，我显示的是产品的尺寸。

这是我的 cart.ts：

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>