ionic 2無限滾動錯誤

Question

我正在嘗試在ionic2中進行無限滾動，但是每當頁面加載時，我都會收到此錯誤Cannot read property 'complete' of undefined

HTML

<ion-content>

 <ion-list>
   <ion-item *ngFor="let item of posts" (click)="passurl($event,item)">
     <h2>{{item.title}}</h2>
     </ion-item>
 </ion-list>

 <ion-infinite-scroll (ionInfinite)="ionViewDidLoad($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>

JS

ionViewDidLoad(infiniteScroll){
    let loader = this.LoadingController.create({
    content: 'Please Wait'
    });
    loader.present().then(()=>{
      this.http.get('http://mynewweb/templates/messages/titles.php?church_id='+ this.church_id+'&msg_type='+this.NavParams.data.id+ "&page="+this.page).map(res => res.json()).subscribe(data =>{
            console.log(JSON.stringify(data));
            setTimeout(() => {
            for(var i=0;i<data.length;i++){
              this.numofposts = data.length;
            this.posts.push(data[i]);
             }
        infiniteScroll.complete();
          }, 500);
        });
     this.page=this.page+1;
    loader.dismiss();
    });

  }

我遵循了他們網站上ionic2框架上的文檔。 有什么幫助嗎？ 謝謝

Answer 1

您不能將ionViewDidLoad掛鈎用作InfiniteScroll的目標。 您可以將相同的邏輯放入不同的方法中，如下所示：

<ion-infinite-scroll *ngIf="!hideInfinite" (ionInfinite)="loadData($event)">
  <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

並在組件代碼中：

public hideInfinite: boolean;

public loadData(infiniteScroll?: any): void {
    let loader = this.LoadingController.create({
        content: 'Please Wait'
    });

    loader.present().then(()=>{

        this.http.get('http://mynewweb/templates/messages/titles.php?church_id='+ this.church_id+'&msg_type='+this.NavParams.data.id+ "&page="+this.page).map(res => res.json()).subscribe(
            data => {
                console.log(JSON.stringify(data));

                if(!data || !data[0]) {
                    // Hide the infiniteScroll if there's no more data
                    this.hideInfinite = true;
                }

                setTimeout(() => {
                    for(var i=0;i<data.length;i++) {
                        this.numofposts = data.length;
                        this.posts.push(data[i]);
                    }

                    // Check if it's not null/undefined before calling the complete method
                    if(infiniteScroll) {
                        infiniteScroll.complete();
                    }

                }, 500);
            });

        this.page=this.page+1;
        loader.dismiss();
    });

}

如果要在ionViewDidLoad生命周期掛鈎中使用相同的邏輯，則可以調用相同的方法：

ionViewDidLoad(){
  // You can now call the method without sending anything, 
  // since in the code we check if the infiniteScroll is defined 
  // before using its methods
  this.loadData();
}

Answer 2

舊的離子需要這樣寫

$event.state = "closed";

新版本ionic需要這樣寫

infiniteScrollEvent.complete();

（要么）

infiniteScrollEvent.target.complete();

Answer 3

ionViewDidLoad（infiniteScroll）{

this.http.get('http://mynewweb/templates/messages/titles.php?church_id=' + this.church_id + '&msg_type=' + this.NavParams.data.id + "&page=" + this.page).map(res => res.json()).subscribe(data => {
  console.log(JSON.stringify(data));

  if (infiniteScroll) {
    infiniteScroll.complete();
  }

});
this.page = this.page + 1;

}

Answer 4

public play=true;
  public loadData(infiniteScroll?: any): void {
    let loader = this.LoadingController.create({
        content: 'Please Wait'
    });

    loader.present().then(()=>{

        this.http.get('http://mynewweb/templates/messages/titles.php?church_id='+ this.church_id+'&msg_type='+this.NavParams.data.id+ "&page="+this.page).map(res => res.json()).subscribe(
            data => {
              this.numofposts=this.numofposts+data.length;
              this.itemsdisplayed = this.itemsdisplayed + 10;

                if(this.itemsdisplayed > this.numofposts) {
                    // Hide the infiniteScroll if there's no more data
                    this.play = false;
                }

                setTimeout(() => {
                    for(var i=0;i<data.length;i++) {
                        this.numofposts = data.length;
                        this.posts.push(data[i]);
                    }

                    // Check if it's not null/undefined before calling the complete method
                    if(infiniteScroll) {
                        infiniteScroll.complete();
                    }

                }, 500);
            });

        this.page=this.page+1;
        loader.dismiss();
    });

}

HTML

<ion-infinite-scroll *ngIf="play" (ionInfinite)="loadData($event)">
  <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>