Json 如何在Ionic 3中添加和集成pull to refresh功能

我正在使用wordpress开发一个Ionic应用程序集成d，并使用RESTAPI（JSON）提取数据

下面的代码在我的一个.ts文件中，它完美地执行了无限滚动

doInfinite(infiniteScroll) {
    let page = (Math.ceil(this.posts.length/10)) + 1;
    let loading = true;

    this.wordpressService.getRecentPosts(this.categoryId, page)
    .subscribe(data => {
      for(let post of data){
        if(!loading){
          infiniteScroll.complete();
        }
        post.excerpt.rendered = post.excerpt.rendered.split('<a')[0] + "</p>";
        this.posts.push(post);
        loading = false;
      }
    }, err => {
      this.morePagesAvailable = false;
    })
  }

编辑 以下是我的提供商/服务的样子

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
export const WORDPRESS_URL = 'http://www.example.com/';
export const WORDPRESS_REST_API_URL = WORDPRESS_URL + 'wp-json/wp/v2/';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/forkJoin';


@Injectable()
export class WordpressService {
  constructor(public http: Http){}

  getRecentPosts(categoryId:number, page:number = 1){
    //if we want to query posts by category
    let category_url = categoryId? ("&categories=" + categoryId): "";

    return this.http.get(
      WORDPRESS_REST_API_URL
      + 'posts?page=' + page
      + category_url)
    .map(res => res.json());
  }

  getRecentFewPosts(categoryId:number, page:number = 1){
    //if we want to query posts by category
    let category_url = categoryId? ("&categories=" + categoryId): "";

    return this.http.get(
      WORDPRESS_REST_API_URL
      + 'posts?per_page=5&page=' + page
      + category_url)
    .map(res => res.json());
  }

  getRecentPostsByTag(tagId:number, page:number = 1){
    //if we want to query posts by tag
    let tag_url = tagId? ("&tags=" + tagId): "";

    return this.http.get(
      WORDPRESS_REST_API_URL
      + 'posts?page=' + page
      + tag_url)
    .map(res => res.json());
  }

  getComments(postId:number, page:number = 1){
    return this.http.get(
      WORDPRESS_REST_API_URL
      + "comments?post=" + postId
      + '&page=' + page)
    .map(res => res.json());
  }

  getAuthor(author){
    return this.http.get(WORDPRESS_REST_API_URL + "users/" + author)
    .map(res => res.json());
  }

  getPostCategories(post){
    let observableBatch = [];

    post.categories.forEach(category => {
      observableBatch.push(this.getCategory(category));
    });

    return Observable.forkJoin(observableBatch);
  }

  getCategory(category){
    return this.http.get(WORDPRESS_REST_API_URL + "categories/" + category)
    .map(res => res.json());
  }

  createComment(postId, user, comment){
    let header: Headers = new Headers();
    header.append('Authorization', 'Bearer ' + user.token);

    return this.http.post(WORDPRESS_REST_API_URL + "comments?token=" + user.token, {
      author_name: user.displayname,
      author_email: user.email,
      post: postId,
      content: comment
    },{ headers: header })
    .map(res => res.json());
  }
}

---

任何帮助都将不胜感激。谢谢

您使用复习组件是正确的。视图调用doRefresh方法，我们获取数据，完成后，我们调用refresher对象上的complete（）方法

.ts

  import { Storage } from '@ionic/storage';
    items: any;
      constructor(public navCtrl: NavController, public storage: Storage) {
        this.doRefresh();
      }
        doRefresh(refresher){
            this.storage.get('myStore').then((data) => {
              this.items = data;

              if(refresher)
                 refresher.complete();
            }); 
        }

HTML

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
      pullingText="Pull to refresh"
      pullingIcon="arrow-dropdown"
      refreshingSpinner="circles"
      refreshingText="..fetching">
    </ion-refresher-content>
  </ion-refresher>

我是爱奥尼亚的新手，因此我在编辑中添加了我的服务。请看一看，爱奥尼亚3不再使用Http。修复您的服务以使用新的HttpClient。我没有myStore，这意味着谁？

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
      pullingText="Pull to refresh"
      pullingIcon="arrow-dropdown"
      refreshingSpinner="circles"
      refreshingText="..fetching">
    </ion-refresher-content>
  </ion-refresher>