I'm trying to get ionInfiniteScroll to work - I already got it to work in several other places in my application, and this page is actually almost identical to the other page where it works fine. When I scroll down, nothing happens, there is no loading schedule. I have a console message right inside my doInfinite method and it never executes ... so the doInfinite code never executes. I think maybe something is wrong with the html structure as the method is not executing:
<ion-content no-padding> <div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> ... <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'> <ion-list class="marginstatus" no-padding> <ion-item *ngFor="let a of promotions" no-padding> <div class="feedtoptextcontainer"> <div class="usernamecontainer"> <h4 class="postusername">@{{a.username}}</h4><br> </div> <h3 class="promotitle">{{a.title}}</h3> <div class="desccontainer"> <h4 class="deal">{{a.caption}}</h4> </div> </div> </ion-item> </ion-list> <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."> </ion-infinite-scroll-content> </ion-infinite-scroll> </div> ... <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item> </div>
doInfinite method code:
doInfinite(infiniteScroll) { console.log("in doinfinite promotionsssssss"); setTimeout(() => { console.log('Begin async operation'); console.log(this.startAtKey1 + " before %%^&^&^% start at"); this.list2 = this.af.list('/promotions', { query: { orderByKey: true, endAt: this.startAtKey1, limitToLast: 11 }}); this.subscription11 = this.list2.subscribe(items => { let x = 0; this.lastKey1 = this.startAtKey1; items.forEach(item => { let storageRef = firebase.storage().ref().child('/settings/' + item.customMetadata.username + '/profilepicture.png'); storageRef.getDownloadURL().then(url => { console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!"); item.customMetadata.picURL = url; }).catch((e) => { console.log("in caught url !!!!!!!$$$$$$$!!"); item.customMetadata.picURL = 'assets/blankprof.png'; }); if(this.startAtKey1 !== item.$key && this.lastKey1 !== item.$key) { console.log(this.startAtKey1 + " :startAtKey1 before 4444444 item key: " + item.$key); this.promotions.push(item.customMetadata);
UPDATE
I think that another important thing that I should note is that I use 5 different lists, which look like below ... all on one page (I just included 2 below - this is what I tested for the last time). Where ... is in the code, there are 4 more lists, as shown above. They are all enclosed in a <div> , as above, and none of them are displayed at the same time - I think I should publish the entire text of <ion-content> just because things interfere with each other:
<ion-content no-padding> <div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <div class ='availability contentone' #availability [@moveList]='moveState'> <ion-list class="marginstatus" no-padding> <ion-item *ngFor="let z of availabilities" no-padding (tap)="presentProfileModal(z.salon, z.time)"> <div class="feedtoptextcontainer"> <div class="imageparent"> <img class="postprofilepic" src="{{z.pic}}"> </div> <div class="usernamecontainer"> <h4 class="postusername">@{{z.salon}}</h4><br> <h4 class="poststudio">{{z.time}}</h4> </div> </div> </ion-item> </ion-list> </div> <div class ='distance contentone' #distance [@moveList]='moveState'> <ion-list class="marginstatus" no-padding> <ion-item *ngFor="let z of distances" no-padding (tap)="presentProfileModalDistance(z.salon)"> <div class="feedtoptextcontainer"> <div class="imageparent"> <img class="postprofilepic" src="{{z.pic}}"> </div> <div class="usernamecontainer"> <h4 class="postusername">@{{z.salon}}</h4><br> <h4 class="poststudio">{{z.distance}} mi</h4> </div> </div> </ion-item> </ion-list> </div> <div class ='ratings contentone' #ratings [@moveList]='moveState'> <ion-list class="marginstatus" no-padding> <ion-item *ngFor="let a of rating ; let i = index" no-padding (tap)="presentProfileModalRatings(a.username)"> <div class="feedtoptextcontainer"> <div class="imageparent"> <img class="postprofilepic" src="{{a.picURL}}"> </div> <div class="usernamecontainer"> <h4 class="postusername">@{{a.username}}</h4><br> <h4 class="poststudio">{{a.stars}}</h4> </div> </div> </ion-item> </ion-list> </div> <div class ='price contentone' #price [@moveList]='moveState'> <ion-list class="marginstatus" no-padding> <ion-item *ngFor="let a of pricesArray" no-padding (tap)="presentProfileModalPrice(a.username)"> <div class="feedtoptextcontainer"> <div class="imageparent"> <img class="postprofilepic" src="{{a.picURL}}"> </div> <div class="usernamecontainer"> <h4 class="postusername">@{{a.username}}</h4><br> <h4 class="poststudio">{{a.price}}</h4> </div> </div> </ion-item> </ion-list> <ion-infinite-scroll (ionInfinite)="doInfiniteP($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."> </ion-infinite-scroll-content> </ion-infinite-scroll> </div> <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'> <ion-list class="marginstatus" no-padding> <ion-item *ngFor="let a of promotions" no-padding> <div class="feedtoptextcontainer"> <div class="usernamecontainer"> <h4 class="postusername">@{{a.username}}</h4><br> </div> <h3 class="promotitle">{{a.title}}</h3> <div class="desccontainer"> <h4 class="deal">{{a.caption}}</h4> </div> </div> </ion-item> </ion-list> <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."> </ion-infinite-scroll-content> </ion-infinite-scroll> </div> <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item> </div> </ion-content>
I turn lists on and off using renderer as renderer.setElementStyle(el, 'display', 'none) or block .
html angular typescript infinite-scroll ionic2
ewizard
source share