css - 如何在我的应用程序中使用 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();

同时考虑重构您的代码。理想情况下，您应该在异步任务完成后调用 complete，并且没有必要将另一个函数返回到 html 端，并且在返回后调用 complete 只会以死代码结束。