イオン無限スクロールの発射回数が極端に少ない

Question

ionInfiniteScrollを取得しようとしています。私は既にアプリのいくつかの場所で動作させていますが、このページは実際にはうまく動作している別のページとほとんど同じです。下にスクロールすると、グラフィックはロードされません。私は自分のdoInfiniteメソッドの内部にコンソールメッセージを持っていて、決して実行しないので、doInfiniteコードは決して実行されません。私は、メソッドが実行されないので、HTML構造に問題があるかもしれないと思っています：

<ion-content no-padding> 
    <div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"--> 

    ... 

    <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="imageparent"> 
      <img class="postprofilepic" src="{{a.url}}"> 
     </div>--> 
     <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> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </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メソッドコード：

doInfinite(infiniteScroll) { 
    console.log("in doinfinite promotionsssssss"); 
    setTimeout(() => { 
     console.log('Begin async operation'); 
     /*console.log(this.content.directionY + "  upupupupupupu********"); 
     if(this.content.directionY == 'up') { 
     this.show = false 
     } 
     else { 
     this.show = true; 
     }*/ 

     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); //unshift?************** 
      } 

      if(x == 0) { 
       this.startAtKey1 = item.$key; 
      } 

      x++; 
      });   

     }) 

     infiniteScroll.complete(); 

    }, 500); 
    } 

UPDATE

を私は思います注目すべきもう1つの重要な点は、私が下のような5つの異なるリストを使用していることです。すべて同じページにあります（私は下に2つしか含まれていません - それは私が最後にテストしたものです） 。コード内に...がある場合は、上記のような4つのリストがあります。これらは全て上記のような<div>年代に囲まれている - と、それらのどれもが今までに同時に表示されませんされている - 私は全体<ion-content>ちょうど包み物事が互いに干渉している投稿するべきだと思う：

<ion-content no-padding> 
<div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"--> 



    <!--<ion-refresher (ionRefresh)="doRefresh($event)"> 
    <ion-refresher-content></ion-refresher-content> 
    </ion-refresher>--> 


    <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> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </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> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </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> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </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> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </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="imageparent"> 
      <img class="postprofilepic" src="{{a.url}}"> 
     </div>--> 
     <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> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </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> 

私はrendererのようにrenderer.setElementStyle(el, 'display', 'none) or blockのようにリストを出し入れします。

Answer 1

cssは、私が.scroll-contentにあったものと矛盾していることが判明しました。 cssを.scroll-contentに追加すると、ion-infinite-scrollが機能しなくなるようです。