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-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（）在从服务器获取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);
  }

离子刷新器不会刷新页面内容

2 个答案: