使用离子刷新器时，如何在刷新时显示Firebase数据？

Question

我的Firbase数据库中有一些异步数据。我在.html文件中使用了ion-refresher。但是当我向firebase数据库添加新数据时，数据会被加载到那里并同时显示在视图中。我无法使用ion-refresher。我怎么能这样做？

代码：

html的

<ion-content padding>
   <ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content refreshingText="Refreshing...">
      </ion-refresher-content>
      </ion-refresher>
  <ion-list>

      <ion-item *ngFor="let data of datas | async" class="pqr">
        <ion-thumbnail item-left>
          <img src="assets/image/{{data.imageName}}">
        </ion-thumbnail>
        {{data.Comp}}<br> {{data.Demand}}
        <br>
        <p> {{data.Desig}}<br></p>
        {{data.Place}}<br> {{data.when}}
        <br>
      </ion-item>

.TS

export class HomePage implements OnInit {
  datas: FirebaseListObservable<any[]>;
  // datas: FirebaseListObservable<Item[]>;

  constructor(public navCtrl: NavController, public authData: AuthData, public af: AngularFire) {
    //this.loadData();
  }
  ngOnInit() {
    this.datas = this.af.database.list('/datas');
  }

   doRefresh(refresher) {
   console.log('Begin async operation', refresher);

  setTimeout(() => {
  console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
   }

Answer 1

我不知道你需要加载什么数据。但这是如何做你的事情。 如果你在构造函数ngOnInit()中调用任何数据加载方法，它可能会在你加载页面时加载数据。

要使用离子刷新器，只需调用刷新器方法中的任何数据加载方法。

doRefresh(refresher) {
   console.log('Begin async operation', refresher);

  setTimeout(() => {

  loaddata();             //<-call your data load method here

  console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
   }

另见https://alligator.io/ionic/refresher-ionic/