Can't scroll through the items in Ionic 3 using *ngFor - html

Question

I am using *ngFor="let item of cartItems; let i = index;" to inflate the list of items in the cart on my cart html page. What is happening is even if the cart items is more than 5-6, when the cart page is opened for the first time, only 2 items are displayed and somehow I am not able to scroll. When I click on the proceed button (present inside the footer element of the page) it takes me to the next page that is "Address form" and when I navigate back to the cart page again, I can scroll through the items. I don't know why is this happening that on the first load I am not able to scroll through the list.
I have used *ngFor in a lot of places and never faced such a behavior.
This is my cart.html file
<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>
This is my footer which is visible only when there are items present inside the cart
<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>
This is my cart.ts file. In my constructor, I am getting all the items inside of my cart
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 = []
});

Answer 1

I solved the issue by adding #ViewChild(Content) content: Content to my cart.ts file and
using
setTimeout(() => {
this.content.resize();
}, 500);
inside of my constructor.
What this basically does is - tells the content to recalculate its dimensions. This should be called after dynamically adding/removing headers, footers, or tabs.
Since I was dynamically hiding my footer, this solved my issue.