Question

这是我的无限循环代码，它工作得很好，帖子被加载，但是我没有连续继续发表文章，而是看到循环中的最后一篇文章，因为每次都是循环。一些提示如何推送数据进行循环计数。

export class HomePage {
posts: any;
more: any;
postlen: number = 0;
imglink: string = "http://blog.bax/img/";

constructor(public navCtrl: NavController, public navParams: NavParams, 
public http: Http) {
  let url = "http://blog.bax/api/blog";
  this.http.get(url).map(res => res.json()).subscribe(data => {
     console.log(this.posts = data);
  });
}

openPage(post:any) {
  this.navCtrl.push('NewsPage', {post: post});
}

openPageMore(morepost:any) {
 this.navCtrl.push('NewsPage', {morepost: morepost});
}

loadMore(infiniteScroll:any) {
setTimeout(() => {
 this.postlen+=20;
  let urlmore = "http://blog.bax/api/indexmore/" + this.postlen;
  console.log(urlmore)
  this.http.get(urlmore).map(res => res.json()).subscribe(data => {
    this.more = data;
  });
  infiniteScroll.complete();
 }, 500);
 }
  }

  home.html

   <ion-list>
    <ion-item *ngFor="let post of posts" (click)="openPage(post)">
    <ion-thumbnail item-start>
        <img src="{{imglink}}{{post.image}}">
    </ion-thumbnail>
      <h2> {{ post.title }}</h2>
      <p> {{ post.excerpt }}</p>
   </ion-item>
   <ion-item *ngFor="let post of more" (click)="openPage(post)">
    <ion-thumbnail item-start>
        <img src="{{imglink}}{{post.image}}">
    </ion-thumbnail>
      <h2> {{ post.title }}</h2>
      <p> {{ post.excerpt }}</p>
   </ion-item>
   <ion-infinite-scroll (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>

   </ion-list>

Answer 1

只需更换这两行

将more: any;替换为more: any = []

this.more = data;与this.more = this.more.concate(data);

Answer 2

您需要删除以下代码

    <ion-item *ngFor="let post of posts" (click)="openPage(post)">
    <ion-thumbnail item-start>
        <img src="{{imglink}}{{post.image}}">
    </ion-thumbnail>
      <h2> {{ post.title }}</h2>
      <p> {{ post.excerpt }}</p>
   </ion-item>
   <ion-item *ngFor="let post of more" (click)="openPage(post)">
    <ion-thumbnail item-start>
        <img src="{{imglink}}{{post.image}}">
    </ion-thumbnail>
      <h2> {{ post.title }}</h2>
      <p> {{ post.excerpt }}</p>
   </ion-item>

替换为

<ion-item *ngFor="let post of more" (click)="openPage(post)">
    <ion-thumbnail item-start>
        <img src="{{imglink}}{{post.image}}">
    </ion-thumbnail>
    <h2> {{ post.title }}</h2>
    <p> {{ post.excerpt }}</p>
</ion-item>

从构造函数中删除代码。您正在重复代码，这在您可以重用时不是一个好习惯。创建一个函数ionViewDidEnter()或ionViewWillEnter()来放置代码而不是构造函数，这是由ionic提供的，

ionViewDidEnter(){
    this.loadMore();
}

loadMore(infiniteScroll:any) {
   setTimeout(() => {
       let urlmore = "http://blog.bax/api/indexmore/" + this.postlen;
       this.http.get(urlmore).map(res => res.json()).subscribe(data => {
          this.more.concat(data);
       });
       this.postlen+=20;
       if(typeof(infiniteScroll) != 'undefined')
           infiniteScroll.complete();
       }, 500);
   }
}

离子3无限卷轴

2 个答案: