Loading asyn data with ion-refresher


#1

I am using ion-refresher to refresh my code but the code does no displays the list of datasets on refresh or on without refresh.Here is my code below:

###.html

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

###.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);
   }