離子複習不刷新頁面內容

Question

我試圖在函數再次調用服務刷新頁面，但我沒有做......這裏是代碼：

export class JobsPage { 
    jobs: Jobs[] 

    constructor(public navCtrl: NavController, private jobsData: JobsData) { 

     jobsData.load().then(res => { 
     this.jobs = res; 
     }) 
     } 

    doRefresh(refresh){ 

     setTimeout(() => { 
     this.jobsData.load().then(res => { 
     this.jobs = res; 
     }); 
     refresh.complete(); 
     }, 1000); 
    } 

由於你會發現我在刷新功能中再次運行service.jobsData.load（），但是新數據不會更新......除非我完全刷新網頁以便加載新數據

html我已經放置了正確的複習下<ion-content>

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

    <ion-card *ngFor="let job of jobs"> 
    //// the page content 
    </ion-card> 
    </ion-content> 

我包括service.ts代碼以及：

load() { 
    if (this.data) { 
     return Promise.resolve(this.data); 
    } 
    return new Promise(resolve => { 
     this.http.get(this.jobsApiUrl) 
     .map(res => res.json()) 
     .subscribe(data => { 
     this.data = data.data; 
     resolve(this.data); 
     }); 
    }); 
    } 

.subscribe是用於訪問數據的API { data: {.....}, category: {.....} } 我不能找到一種方法，這與Observable

Answer 1

儘量完成刷新行動異步操作完成後。 然後把完整的函數調用。

doRefresh(refresh){ 

     setTimeout(() => { 
     this.jobsData.load().then(res => { 
     this.jobs = res; 
     refresh.complete();//here 
     }); 
     }, 1000); 
    } 

編輯此外， 設置的離子複習內容中的工作離子卡列表。

<ion-content> 
     <ion-refresher (ionRefresh)="doRefresh($event)"> 
     <ion-refresher-content 
      pullingIcon="arrow-dropdown" 
      pullingText="Pull to refresh" 
      refreshingSpinner="circles" 
      refreshingText="Refreshing..."> 
//here 
     <ion-card *ngFor="let job of jobs"> 
     //// the page content 
     </ion-card> 
     </ion-refresher-content> 
     </ion-refresher> 


     </ion-content> 

您的服務方法返回相同的數據，因爲你已經在服務它保存每次class.Either加載..

load() { 
    return new Promise(resolve => { 
     this.http.get(this.jobsApiUrl) 
     .map(res => res.json()) 
     .subscribe(data => { 
     this.data = data.data; 
     resolve(this.data); 
     }); 
    }); 
    } 

或者刪除數據對象在你的服務，並調用它的方法在你的刷新方法加載之前。

Answer 2

我認爲HTTP服務的執行需要一定的時間，

所以你refresh.complete（）從服務器獲取resposne之前執行。

嘗試這樣做：

export class JobsPage implements onInit { 

    jobs: Jobs[] 

    constructor(public navCtrl: NavController, private jobsData: JobsData) { 
    this.loadData(); 
    } 

    loadData() { 
    jobsData.load().then(res => { 
    this.jobs = res; 
    }); 
    } 

    doRefresh(refresh){ 
    jobsData.load().then(res => { 
     // To check response data format 
     console.log("data from server", res); 
     this.jobs = res; 
     refresh.complete(); 
    }); 
    } 

} 

YOUT HTML是看喜歡：

<ion-refresher (ionRefresh)="doRefresh($event)"> 
    <ion-refresher-content></ion-refresher-content> 
</ion-refresher> 

，也是我正在做這樣的事情在我的項目，它的工作對我來說， 請檢查一次，它會幫助你

complaintRefresh(refresher) { 
    // Set currnt page 
    this.currentPage = 1; 
    setTimeout(() => { 
     this.c.getComplaints(this.currentPage).subscribe((complaints) => { 
     // Handle htp response status 
     if (complaints.status === 204) { 
      this.EmptyComplaints = true; 
     } else { 
      this.EmptyComplaints = false; 
      this.complaints = complaints.json(); 
     } 
     }, (err) => { 
     this.nl.showToast("Internal Server Error.. please try again"); 
     }); 
     refresher.complete(); 
    }, 1000); 
    }