ion-refresher 不刷新页面内容

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

如您所见，我正在刷新函数中再次运行服务 this.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-refresher-content 中设置 ion-card 作业列表。

    <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>

您的服务方法正在返回相同的数据，因为您已将其保存在服务类中。每次都加载..

 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() 在从服务器获取响应之前执行。

尝试这样做：

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

}

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