如何在我的应用程序中使用 Ionic 2 Pulling Refresher？

Question

大家好，我正在开发 angularjs 2/ionic2 移动应用程序，我需要在我的应用程序中进行拉动复习，我们已经尝试了这个链接：-https://ionicframework.com/docs/v2/api/components/refresher/Refresher/ 过程我刷新了页面但它没有得到dismissLoader ，我们已经给我的应用程序的图像刷新了：-

• 我们不知道我们在哪里犯了错误以及我们需要在我的项目中在哪里添加正确的功能...

• 当我们拉动页面时，它会刷新但不会被关闭，Refreshing 文本和图标显示它没有被关闭...

• 我们期望在拉出页面后需要刷新页面，然后刷新文本和图标需要被关闭...

**我们只在 html 中添加了编码：-****

<ion-refresher (ionRefresh)="setFilteredItems($event)">
    <ion-refresher-content refreshingSpinner="circles" refreshingText="Refreshing...">

    </ion-refresher-content>
</ion-refresher>

• 我们没有在type script 部分添加任何内容...所以请检查并更新解决方案....

• 我们已经创建了示例Plunker

• 请更新 plunker 以了解解决方案，谢谢.....

我的 Type Script 构造函数代码：-

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { GlobalStateService } from '../../services/global-state.service';
import { AccountSigninPage } from '../account-signin/account-signin';
import { AccountSignupPage } from '../account-signup/account-signup';
import { ActivityAddPage } from '../activity-add/activity-add';
import { Activity } from "../../services/actopi-sdk/model/Activity";
import { UserLoginService } from "../../services/account-management.service";
import { ResourceListPage } from '../resource-list/resource-list';
import { IamAuthorizerClient } from "../../services/actopi-api.service";
import { CustomAuthorizerClient, NoAuthorizationClient, UserPoolsAuthorizerClient } from "../../services/actopi-api.service";
import { Config } from '../../config/config'
import { Logger } from '../../services/logger.service';
import 'rxjs/add/operator/debounceTime';
import { FormControl } from '@angular/forms';

declare const AWS: any;

@Component({
  templateUrl: 'activity-list.html',
})
export class ActivityListPage {

  initialized = false;
  accountSigninPage = AccountSigninPage;
  accountSignupPage = AccountSignupPage;
  activityAddPage = ActivityAddPage;
  activitys: Activity[] = [];
  resourceListPage = ResourceListPage;
  searchTerm: string = '';
  searchControl: FormControl;

  displayDeleteActivityConfirmation(activityId, activityName) {
    console.log("Deleting activityID " + activityId);

    let confirm = this.globals.getAlertController().create({
      title: 'Delete activity?',
      message: `Are you sure you want to delete [<b>${activityName}</b>]? All resources and bookings associated with [<b>${activityName}</b>] will also be deleted!`,
      buttons: [
        {
          text: 'Cancel',
          handler: () => { /* do nothing */ }
        },
        {
          text: 'OK',
          handler: () => {
            this.deleteActivity(activityId)
              .then(() => {
                this.globals.dismissLoader();
                this.globals.displayToast(`Activity [${activityName}] has been successfully deleted`);
              })
              .catch((err) => {
                this.globals.dismissLoader();
                this.globals.displayAlert('Error encountered',
                  'Delete failed. Please check the console logs for more information.');
                console.log(err);
              });
          }
        }
      ]
    });
    confirm.present();
  }

  deleteActivity(activityId): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      // delete from the database
      this.globals.displayLoader("Deleting...");
      this.customAuthClient.getClient().activitysDelete(activityId).subscribe(
        () => {
          // remove the item from the activitys array
          let index = this.activitys.findIndex(activity => { return activity.activityId == activityId });
          if (index > -1) {
            this.activitys.splice(index, 1);
          }
          resolve();
        },
        (err) => {
          reject(err);
        }
      );
    });
  }

  gotoResourceListPage(activity) {
    this.navCtrl.push(ResourceListPage, activity);
  }

  filterItems(searchTerm): void {
    this.activitys = [];
    this.userPoolsAuthClient.getClient().activitysList().subscribe(
      (data) => {
        this.activitys = data.items.filter((activity) => {
          return activity.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
        });
        this.globals.dismissLoader();
        this.initialized = true;
      },
      (err) => {
        this.globals.dismissLoader();
        this.initialized = true;
        console.error(err);
        this.globals.displayAlert('Error encountered',
          `An error occurred when trying to load the activitys. Please check the console logs for more information.`)
      });

  }

  loadActivitysWithAuth(): void {
    this.activitys = [];
    this.userPoolsAuthClient.getClient().activitysList().subscribe(
      (data) => {
        // this.activitys = data.items
        // sort by name
        let searchTerm: string = '';
        // this.activitys = data.items.sort((a, b) => {
        //     return a.name.localeCompare(b.name);
        // });
        this.globals.dismissLoader();
        this.initialized = true;
      },
      (err) => {
        this.globals.dismissLoader();
        this.initialized = true;
        console.error(err);
        this.globals.displayAlert('Error encountered',
          `An error occurred when trying to load the activitys. Please check the console logs for more information.`)
      }
    );
  };

  loadActivitysWithoutAuth(): void {
    this.activitys = [];
    this.noAuthClient.getClient().activitysList().subscribe(
      (data) => {
        // this.activitys = data.items
        // sort by name
        this.activitys = data.items.sort((a, b) => {
          return a.name.localeCompare(b.name);
        });
        this.globals.dismissLoader();
        this.initialized = true;
      },
      (err) => {
        this.globals.dismissLoader();
        this.initialized = true;
        console.error(err);
        this.globals.displayAlert('Error encountered',
          `An error occurred when trying to load the activitys. Please check the console logs for more information.`)
      }
    );
  };


  constructor(private navCtrl: NavController, public globals: GlobalStateService, private noAuthClient: NoAuthorizationClient, private customAuthClient: CustomAuthorizerClient, private userPoolsAuthClient: UserPoolsAuthorizerClient, private authClient: IamAuthorizerClient) {
    this.searchControl = new FormControl();
  }
  ionViewDidEnter() {

    Logger.banner("Activitys");
    this.activitys = [];

    if (!this.initialized) {
      this.initialized = false;

      if (UserLoginService.getAwsAccessKey() != null) {
        // if (CognitoUtil.getUserState() === UserState.SignedIn) {
        // console.log(AWS.config.credentials);
        UserLoginService.getAwsCredentials()
          .then((data) => {
            this.globals.displayLoader("Loading...");
            this.setFilteredItems(refresher);
            this.searchControl.valueChanges.debounceTime(700).subscribe(search => {
              this.globals.displayLoader("Loading...");
              this.setFilteredItems(refresher);
              this.globals.dismissLoader();
            });
          })
          .catch((err) => {
            console.log("ERROR: Unable to load activitys!");
            console.log(err)
          })
      }
    }
  }

  setFilteredItems(refresher) {

    return this.filterItems(this.searchTerm);


    refresher.complete();

  }


}

Answer 1

一旦完成新数据的加载，您需要调用 refresher.complete() 来关闭您的复习。

setFilteredItems(refresher?:any){
   //async call to load.
   // in the then function
   if(refresher)
      refresher.complete();
   }
}

刷新是从 html onRefresh 发送的。使用?，您无需在代码中传递对象即可调用。

this.setFilteredItems();

还可以考虑重构您的代码。理想情况下，您应该在异步任务完成后调用完成，并且将另一个函数返回到 html 端并在返回后调用完成将最终成为死代码。