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

Posted 2023-02-19

【中文标题】如何在 Ionic 无限滚动中从 Wordpress API 输出累积列表

【英文标题】：How to output a cumulative list from Wordpress API in Ionic infinite scroll

【发布时间】：2020-08-30 10:33:36

【问题描述】：

我是 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`]);
  

请帮我弄清楚我做错了什么。

【参考方案1】：

所以根据 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] );
          

【参考方案2】：

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

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