无法使用 *ngFor 滚动浏览 Ionic 3 中的项目答案

【问题标题】：Can't scroll through the items in Ionic 3 using *ngFor无法使用 *ngFor 滚动浏览 Ionic 3 中的项目
【发布时间】：2018-12-24 22:27:33
【问题描述】：

我正在使用 *ngFor="let item of cartItems; let i = index;"在我的购物车 html 页面上增加购物车中的商品列表。发生的情况是，即使购物车项目超过 5-6，当第一次打开购物车页面时，只显示 2 个项目，不知何故我无法滚动。当我点击继续按钮（出现在页面的页脚元素内）时，它会将我带到下一页“地址表单”，当我再次导航回购物车页面时，我可以滚动浏览这些项目。我不知道为什么会发生这种情况，在第一次加载时我无法滚动列表。我在很多地方都使用过 *ngFor 并且从未遇到过这样的行为。

这是我的 cart.html 文件

<ion-card class="style-this-card">
<div>
  <ion-list no-lines>
    <div>
    <ion-item no-lines *ngFor="let item of cartItems;  let i = index;">
      <ion-thumbnail item-start>
        <img style="width:100px; height:100px" [src]='item.Meal.r_image'>
      </ion-thumbnail>
      <p style="color:firebrick; font-weight:bold;"> {{item.Meal.price | currency:'INR':"symbol"}}</p>
      <p style="white-space:normal; font-weight:bold">{{item.Meal.name}}</p>
      <!-- <p style="font-size:12px; white-space:normal">{{item.Meal.mealDes}}</p> -->
      <p style="font-size:12px; white-space:normal">Edit quantity</p>
      <ion-grid class="no-padding-no-margin">
        <ion-row>
          <ion-col class="no-padding-no-margin">
            <button ion-button clear (click)="decreaseQty(item)">
              <ion-icon name="remove"></ion-icon>
            </button>
          </ion-col>
          <ion-col class="no-padding-no-margin">
            <p class="qty">{{item.qty}}</p>
          </ion-col>
          <ion-col class="no-padding-no-margin">
            <button ion-button clear (click)="increaseQty(item)">
              <ion-icon name="add"></ion-icon>
            </button>
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-icon end name="trash" clear item-end (click)="remove(item.Meal, i )"></ion-icon>
    </ion-item>
  </div>
  </ion-list>
</div>

这是我的页脚，只有当购物车中有物品时才可见

<ion-footer *ngIf='!noItems'>

<ion-item-group>
  <ion-item-divider light text-left>Order Summary</ion-item-divider>
</ion-item-group>


<div>
  <ion-grid style="margin-top: 5px; padding-left: 0px;">
    <ion-row no-lines>
      <ion-col no-lines style="align-items: center; display: flex; padding-left: 0px; margin-left: 0px;">
        <ion-item style="margin: 0px;">
          <ion-input placeholder="Coupon" [(ngModel)]="coupon"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col no-lines style="align-items: center; display: flex">
        <ion-spinner *ngIf='isLoading'></ion-spinner>
        <div [hidden]='isLoading'>
          <button *ngIf='!isCouponValid' ion-button (click)="verify(coupon)">Apply</button>
          <button *ngIf='isCouponValid' ion-button clear (click)="removeCoupon()">
            <ion-icon name="md-close"></ion-icon>
          </button>
        </div>
      </ion-col>
      <ion-col>
      </ion-col>
    </ion-row>
  </ion-grid>
</div>


<ion-grid no-padding>
  <ion-row no-padding>
    <ion-col>
      <div no-padding id="block1" style="padding-top: 0px; padding-bottom: 0px">
        <p style="font-size:14px; padding-top: 0px;">Sub Total</p>
      </div>
      <div no-padding id="block2" style="padding-top: 0px; padding-bottom: 0px">
        <p style="font-size:14px; padding-top: 0px;">{{ total | currency:'INR':"symbol"}}</p>
      </div>
    </ion-col>
  </ion-row>

  <ion-row *ngIf='isApplyCoupon'>
    <ion-col>
      <div no-padding id="block1" style="padding-top: 0px; padding-bottom: 0px">
        <p style="font-size:14px; padding-top: 0px; margin: 0px;">Coupon Applied</p>
      </div>
      <div no-padding id="block2" style="padding-top: 0px; padding-bottom: 0px">
        <p style="font-size:14px; padding-top: 0px; margin: 0px;">{{ - discountAmt | currency:'INR':"symbol"}}</p>
      </div>
    </ion-col>
  </ion-row>



  <ion-row no-padding>
    <ion-col *ngIf='isApplyCoupon'>
      <div no-padding id="block1" style="padding-top: 0px">
        <p style="font-size:16px; padding-top: 0px;">Total</p>
      </div>
      <div no-padding id="block2" style="padding-top: 0px">
        <p style="font-size:16px; padding-top: 0px;">{{ finalDiscAmnt | currency:'INR':"symbol"}}</p>
      </div>
    </ion-col>

    <ion-col *ngIf='!isApplyCoupon'>
      <div no-padding id="block1" style="padding-top: 0px">
        <p style="font-size:16px; padding-top: 0px;">Total</p>
      </div>
      <div no-padding id="block2" style="padding-top: 0px">
        <p style="font-size:16px; padding-top: 0px;">{{ total | currency:'INR':"symbol"}}</p>
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

<button [hidden]='noItems' ion-button full color="primaryTwo" (click)="goToShipping()">CHECKOUT</button>

这是我的 cart.ts 文件。在我的构造函数中，我得到了购物车中的所有物品

this.storage.ready().then(() => {
  this.storage.get("cart").then((data) => {
    if (data != null) {
      this.cartItems = data;
      console.log('cart items', this.cartItems);
      // console.log("cart data FOR UTKARSH", JSON.stringify(data));

      if (this.cartItems.length == 0 || this.cartItems == null) {
        this.noItems = true;
        console.log("no items here", this.noItems);
      } else {
        this.noItems = false;
        this.cartItems.forEach((item, index) => {
          // console.log("cartItems", this.cartItems[index].qty);
          // console.log("the contents of item", item);
          this.total = this.total + (item.Meal.price * item.qty)
          this.finalDiscAmnt = this.total;
          //console.log('The QTY is', item.qty);
          //console.log("cart data 2", this.cartItems);
          //this.displayPrice= this.displayPrice= item.product.produtPrice * item.qty;
          //console.log("prices are ", this.displayPrice= item.product.produtPrice * item.qty);
        });
      }
    }
  });
}).catch((err) => {
  this.noItems = true;
  console.log(err);
  this.cartItems = []
});

【问题讨论】：

标签： html ionic-framework ionic3 ngfor

【解决方案1】：

我通过在我的 cart.ts 文件中添加 @ViewChild(Content) content: Content 解决了这个问题，然后使用

setTimeout(() => {
      this.content.resize();
    }, 500);

在我的构造函数内部。

这基本上是 - 告诉内容重新计算其尺寸。这应该在动态添加/删除页眉、页脚或标签后调用。

由于我动态隐藏了页脚，这解决了我的问题。

【讨论】：