.TS

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

  constructor(public navCtrl: NavController, public authData: AuthData, public af: AngularFire) { }
  ngOnInit() {

    this.datas = this.af.database.list('/datas');
    //console.log('datas'+JSON.stringify(this.datas));

  }

  loadData(refresher?: any) {
    callToProviderApi().subscribe(newData => {
      this.datas = newData;
    }, err => console.log(err),
      () =>if(refresher)
        refresher.complete());//call complete on subscribe complete
  }

  doRefresh(datas) {
    this.loadData(datas);
  }

html的

<ion-refresher (ionRefresh)="doRefresh()">
        <ion-refresher-content>
          pullingIcon="arrow-dropdown"
        </ion-refresher-content>
      <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>
      </ion-list>
      </ion-refresher>

我不明白以下几点：

由于数据集是asyn，是否可以在控制台中查看？
当我运行此代码时，以下错误显示为运行时错误：Cannot read property 'complete' of undefined。
当我导航到显示我的内容的页面时，它不会显示已经存在的内容以及复习继续开始。

注意：如果需要更多输入和屏幕截图，请告诉我。

Answer 1

由于数据集是asyn，可以在控制台中查看吗？

您正在使用async管道。您可以通过尝试在ngOnChanges() lifecyclehook中打印来记录它。

当我运行此代码时，以下错误显示为运行时错误：无法读取属性＆＃39;完成＆＃39;未定义的。

您在html通话中犯了一个小错误。您需要将$event传递给doRefresh()

<ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content>
          pullingIcon="arrow-dropdown"
        </ion-refresher-content>
</ion-refresher>

当我导航到显示我的内容的页面时，它不显示已经存在的内容，以及刷新器继续启动。

您需要使用离子修正器api以及数据加载。我建议你在组件中订阅，而不是async。

 datas:any[];
loadData(refresher?:any){
  this.af.database.list('/datas').subscribe(newData=>{ //this is the asynchronous function you call which is setting your data..
     this.datas=newData;
  },err=>console.log(err),
  ()=>if(refresher)refresher.complete());//call complete on subscribe complete
}

doRefresh(datas){
  this.loadData(datas);
}

此外，您的ion-list应位于ion-refresher html块之外。你可以从构造函数中调用this.loadData();。

我的asyn操作完成后如何使用complete（）？

.TS

html的

1 个答案: