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

Question

我只是在我的项目中设置了离子刷新器，它完美地加载了数据，但在完成功能后它并没有隐藏

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

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