Ionic2 拉动刷新功能

Question

news.html

刷新功能

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingText="pull to refresh">

    </ion-refresher-content>
  </ion-refresher>

从服务器获取新闻列表

<ion-list *ngSwitchCase="'news'">
      <ion-card>
          <ion-item-group (click)="goToNewsDetail(new)" text-wrap *ngFor="let new of news">

            <ion-thumbnail *ngIf="new.Preview_image1" item-start>
              <img src="{{new.Preview_image1}}">
            </ion-thumbnail>

            <ion-card-content>
              <ion-item>
                <ion-card-title>{{new.title}}</ion-card-title>
                <p>{{new.news_category}}</p>
                <h3>{{new.publish_time}}</h3>
              </ion-item>
            </ion-card-content>

          </ion-item-group>
      </ion-card>
    </ion-list>

news.ts

  doRefresh(refresher){

    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 1500);

  }

获取新闻数据

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public newsData:NewsDataProvider){
    this.getNews();
  }
  getNews() {
      this.newsData.getNews().then(data => {
        this.news = data;
      });
  }

我想刷新新闻列表并从服务器获取新的新闻列表。我从 ionic2 doc 获得的这段代码，但它对我不起作用

编辑： 这是我在 news.ts 中添加的，没有显示错误，但刷新后没有新闻列表出来。

  doRefresh(refresher){

    this.getNews().then(() => {
      refresher.complete();
    });

  }

  getNews(): Promise<any> {
      return this.newsData.getNews().then(data => {
        this.news = data;
      });
  }

Answer 1

您是否已经尝试在 doRefresh? 内调用 getNews 方法

  constructor(public navCtrl: NavController, 
              public navParams: NavParams,
              public newsData: NewsDataProvider){
    this.getNews();
  }

  getNews(): Promise<any> {
      return this.newsData.getNews().then(data => {
        this.news = data;
      });
  }

  doRefresh(refresher) {
    this.getNews().then(() => {
      refresher.complete();
    });
  }

编辑

调试代码后，我们发现服务在本地保存了一份数据：

getNews() {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      this.http.get('servertrj.com/api/news/index/…').map(res => res.json().data).subscribe(data => {
        this.data = data;
        resolve(this.data);
      });
    });
  }

这就是为什么当拉动刷新尝试获取新数据时，服务返回了相同的项目列表。用以下方法替换该方法应该可以：

  getNews() {
    return new Promise(resolve => {
      this.http.get('servertrj.com/api/news/index/…').map(res => res.json().data).subscribe(data => {
        this.data = data;
        resolve(this.data);
      });
    });
  }

或者，您可以使用 RxJS 中的 toPromise 运算符，而不是创建这样的新承诺：

  getNews(): Promise<any> {
    return this.http.get('servertrj.com/api/news/index/…')
                    .map(res => res.json().data)
                    .toPromise();
  }