Question

大家好我正在使用angularjs 2 / ionic2移动应用程序，我需要在我的应用程序中提取复习，我们尝试过这个链接： - https://ionicframework.com/docs/v2/api/components/refresher/Refresher/进程我刷新了页面但是＃＆＃ 39; s没有得到dismissLoader，我们已经将我的应用图片刷新了： -

我们不知道我们在哪里犯了错误，我们需要在项目中添加正确的功能......
在我们拉页面的同时令人耳目一新，但它没有被解雇，Refreshing文字和图标显示它没有被解雇......
我们期待的一旦我们拉出页面，需要刷新后需要刷新文字和图标......

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

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

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

我们尚未在type script部分添加任何内容...所以请检查并更新解决方案....
我们创建了示例Plunker
请更新plunker以了解解决方案，谢谢......

我的类型脚本构造函数代码： -

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端，并且在返回后调用完成将最终作为死代码。

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

1 个答案: