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文档获取，但它不是我来回

编辑工作： 这是我在news.ts，显示没有错误，但加入后做无刷新新闻列表出来。

doRefresh(refresher){ 

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

    } 

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

Answer 1

你是否已经通过发出呼叫您getNews方法doRefresh?

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); 
     }); 
    }); 
    } 

，而不是创建这样的一个新的承诺或者，你可以使用toPromise操作员RxJS：

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