angularfire2 firebase数据库未显示对象列表中的所有项目

时间:2018-08-19 18:31:51

标签: javascript firebase firebase-realtime-database foreach angularfire2

我需要从给定的firebase db下面检索数据:

enter image description here

以下是我的TS代码来检索数据:

ionViewDidLoad(){
this.customerId = this.navParams.get('data');     
this.customerProvider.getData(this.customerId).snapshotChanges().subscribe(x =>{
  this.listOne = x
  this.listOne.forEach(y =>{
   this.listTwo = this.customerProvider.getListDetails(this.customerId, y.key).snapshotChanges()
   console.log(this.listTwo)
  })      
})
}

以下是HTML:

<ion-item>
  {{(listTwo | async)?.key}}
</ion-item>

问题在于该列表仅显示1个项目,而firebase数据库却包含3个带有密钥的项目。以下是控制台屏幕截图

enter image description here

以下是输出

enter image description here

以下是提供者:

  getFile(customerId){
    return this.afDb.list(`response/${customerId}`)
  }

  getFileDetails(customerId, listOne): AngularFireObject<any>{
    return this.afDb.object(`response/${customerId}/${listOne}`)
  }

似乎出现forEach或AngularFire对象问题,但不确定。

1 个答案:

答案 0 :(得分:2)

snapshotChanges()返回类型为 AngularFireAction 的Observable,您必须首先将其映射以从中过滤数据。这就是为什么您只得到一份清单的原因。试试:

this.customerProvider
  .getData(this.customerId).snapshotChanges()
  .map(filter => {
    return filter.map(c => (
      // return keys only
      c.payload.key
    ));
  }
).subscribe(x => {
  this.listOne = x;
  console.log(x);
  this.listOne.forEach(y =>{
     this.listTwo = this.customerProvider
       .getListDetails(this.customerId, y.key).snapshotChanges()
       .map(filter => {
          filter.map(c => (c.payload.val()))
       })
    })
    console.log(this.listTwo);
 });

希望这会有所帮助。我最近也开始学习Angular。因此,任何反馈将不胜感激。