时间戳

首页 > 解决方案 > 离子：Firebase 查询返回丢失的数据

angular - 离子：Firebase 查询返回丢失的数据

问题描述

我正在尝试在 ıonic 中为 Infinite Scroll 设置分页系统。我想要实现的是获取特定数量的数据块（例如 10 个数据）。然后，当用户到达底部时，它应该从它记录的最后一个数据开始获取另一个数据块。但是，当我运行我的代码时，查询给出了一个包含 1 个数据而不是 10 个数据的块的结果。

我尝试添加控制台日志并尝试了解问题。我分享了我掌握的信息。

feed.page.ts

export class FeedPage implements OnInit {

  ideas: any;
  offset =5;
  nextKey: any;
  prevKeys: any[] = [];
  subscription: any;

  data: any[] = [];

  constructor(private afstore:AngularFirestore,
              private feedsrvc:FeedService) { }

  ngOnInit() {
    this.getIdeas("5dd46790-b369-11e9-bd2b-a7c5019a82a5")
    console.log("baş")
    console.log(this.data)
  }



  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      console.log('Bak bu: '+this.nextKey);
      this.getIdeas(this.nextKey);
      event.target.complete();
    }, 500);
  }

  private getIdeas(key?){

    this.subscription = this.feedsrvc.getIdeas(this.offset,key).valueChanges().subscribe(ideas =>{
                                                                      console.log("Adet: "+this.offset)
                                                                      console.log("Önce")
                                                                      console.log(ideas)
                                                                      //this.ideas = ideas.slice(0,this.offset)
                                                                      this.ideas = ideas
                                                                      this.data=this.data.concat(this.ideas)
                                                                      //console.log("ud"+this.ideas)
                                                                      this.nextKey = `${ideas[this.offset].uuid}`})
                                                                    console.log("Son Key: "+this.nextKey)
  }

}

feed.service.ts

export class FeedService {

    constructor(private afstore:AngularFirestore){}

    getIdeas(offset, startKey?){

       return this.afstore.collection('posts', ref => ref.limit(offset+1).orderBy("uuid").startAt(startKey))
    }
}

标签： angularfirebaseionic-frameworkionic4angularfire2

解决方案

我认为您的查询顺序很重要。

你正在收集{pagesize} + 1，然后开始{startkey}，我假设是在结束之前的一个。

尝试这个：

return this.afstore.collection('posts', ref => ref.startAt(startKey).orderBy("uuid").limit(offset+1))

顺便说一句，分页不太适合 Firebase，但是当我不久前尝试使用它时，我设法使用此答案中的代码获得了一个不错的“加载更多”按钮。它可能会帮助你。

推荐阅读