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