同步后离子刷新器不会隐藏

Question

我刚刚将 ion-refresher 安装到我的项目中，它可以完美地加载数据，但在完成功能后它不会隐藏

home.html

<ion-refresher slot="fixed" pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing..." (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

home.ts

  doRefresh(event) {
    console.log('Begin async operation');
    this.data.getTodayReservations().subscribe(
        reservations => {
            console.log(reservations);
            this.reservations = reservations;
        }, error => {
            console.log(error);
        });
    setTimeout(() => {
      console.log('Async operation has ended');
    }, 2000);
  }

控制台：

Begin async operation
(3) [{…}, {…}, {…}]
Async operation has ended

但触发刷新事件后数据加载，但刷新像这张图片一样停留在顶部

Answer 1

数据更新后，您需要在 doRefresh 中调用 event.complete();。

doRefresh(event) {
    console.log('Begin async operation');
    this.data.getTodayReservations().subscribe(
        reservations => {
            console.log(reservations);
            this.reservations = reservations;
            event.complete();//here
        }, error => {
            console.log(error);
        });
    setTimeout(() => {
      console.log('Async operation has ended');
    }, 2000);
  }

API docs for Ionic 3

Answer 2

在离子 4/5 中使用 event.target.complete()

同步后离子刷新器不会隐藏

ion-refresher doesn't hide after synchronization

cordova

ionic-framework

ionic3