如何在Ionic无限滚动中从Wordpress API输出累积列表

Question

我对angular和Ionic并不陌生，我正在通过与GitHub上的示例项目合作来尝试一种实用的学习方法。

我已经下载了该项目：https://github.com/enappd/ionic4-wordpress-integration，并且已经修改了要从中提取数据的WordPress URL。

当前，加载更多的无限滚动似乎将输出结果替换为下一页结果，而不是将第二页的结果与第一页的结果合并。

我目前正在通过像这样修改home.page.ts来尝试解决方案：

import { Component } from '@angular/core';
import { ToastController, LoadingController } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  url: string = '#######################'
  items: any = []
  page: any = 1;
  constructor(
    public http: HttpClient,
    public Router: Router,
    public toastCtrl: ToastController,
    public loadingController: LoadingController
  ) {

    this.loadPost(this.url, this.page, true);
  }
  async loadPost(url: string, page, showLoading) {
    const loading = await this.loadingController.create({
      message: 'Loading Your posts'
    });
    if (showLoading) {
      await loading.present();
    }

    const route = this.url + 'wp-json/wp/v2/posts'
    // set pagination
    if (!page) {
      page = '1';
    }

    return new Promise((resolve, reject) => {

      var concat;

      // check if url already has a query param
      if (url.indexOf('?') > 0) {
        concat = '&';
      } else {
        concat = '?';
      }

      this.http.get(route + concat + 'page=' + page)
        .subscribe(data => {

          if (showLoading) {
            loading.dismiss();
          }
          this.items = data;
          console.log(data);
          resolve(this.items);
        },
          error => {
            if (showLoading) {
              loading.dismiss();
            }
            reject(error);
            this.presentToast(error.error.message)
          })
    });
  }
  doRefresh(event) {
    this.loadPost(this.url, 1, false).then(() => {
      event.target.complete()
    }).catch(() => {
      event.target.complete()
    });
  }

  loadMore(event) {

    this.page++;

    this.loadPost(this.url, this.page, false).then(items => {

      let length = items["length"];

      for (var i = 0; i < length; ++i) {
            this.items.push( items[i] );
          }

      console.log(this.items);


      event.target.complete()
    }).catch(() => {
      event.target.complete()
    });

  }

  /*
  loadMore(event) {

    this.page++;

    this.loadPost(this.url, this.page, false).then(() => {
      event.target.complete()
    }).catch(() => {
      event.target.complete()
    });

  }
  */

  async presentToast(msg) {

    let toast = await this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom',
      cssClass: 'normal-toast'
    });

    toast.present();

  }

  goToPostDetails(post) {
    this.Router.navigate([`post-details/${post.id}`]);
  }
}

[请帮助我找出我在做什么错。

Answer 1

是因为this.items = data;中的loadPost()。如果this.items存在，则应合并两个数组而不是替换它们，然后删除：

let length = items["length"];
for (var i = 0; i < length; ++i) {
  this.items.push( items[i] );
}

Answer 2

因此，根据lonwi的回答，我意识到我不应该修改loadMore()，因此恢复了将其用于loadMore() ...

loadMore(event) {

    this.page++;

    this.loadPost(this.url, this.page, false).then(() => {
      event.target.complete()
    }).catch(() => {
      event.target.complete()
    });

  }

此外，在loadPost()中，我已将行this.items = data;替换为...

let length = data["length"];
          for (var i = 0; i < length; ++i) {
            this.items.push( data[i] );
          }