AngularFire2无限滚动

我正试图用Ionic2和Firebase实现无限滚动

我使用AngularFire2。我想做的是将新项目添加到获取的列表中，而不是重新加载整个列表

let query$:Observable<any> = this.af.database.list(`quests/`, {
    query: {
        orderByChild: 'date_published',
        limitToFirst: this.recentChunkLimit$ //Subject where I push new limit length
    }
}).publishReplay(1).refCount();

let query$：可观察
我还注意到，对于下一个块，请求被发出2次（尽管我把publishReplay放在了一起）。我使用AngularFire2的所有应用程序都出现了这种情况。
不过我可能误解了一些事情。我确实需要一些澄清

//=============编辑============

现在，我设法实现了我想要的，而不必每次都重新加载整个列表。虽然不是最好的实现，但它很有效。基本上，我创建了一个observable数组，并通过订阅下一个observable块将新值加载到该数组中（在该块中，我还获得了最后一个要开始的元素）。
然而，后一个问题仍然存在-在套接字显示中，我获得了两次请求的数据
 在
查询
选项中使用可观察项并不能像这样工作。底层SDK中没有工具可以动态修改查询的
limitToFirst
，在AngularFire2中也没有方法这样做

每次可观察的
查询
选项发出新值时，都会创建一个新的Firebase ref。你可以在地图上看到它

但是，可以通过如下操作创建表示无限列表的可观察对象：

从“rxjs/Observable”导入{Observable}；
从“rxjs/Subject”导入{Subject}；
导入rxjs/add/observable/defer”；
导入rxjs/add/observable/zip”；
导入rxjs/add/operator/concatMap”；
导入rxjs/add/operator/filter”；
导入rxjs/add/operator/first”；
导入rxjs/add/operator/map”；
导入rxjs/add/operator/scan”；
导入rxjs/add/operator/share”；
导入rxjs/add/operator/startWith”；
常数pageSize=100；
let notifier=重新打开并解析新主题

结果列表是静态的。也就是说，如果数据库发生变化，已经被分页到列表中的子项将不会被更新。实现动态列表更具挑战性，因为基于限制的分页机制很容易影响重复和丢失的子项


自从写下这个答案以来，我已经在Firebase Observable库中提供了经过测试的正向和反向、非实时和实时无限列表Observable实现，这些都是我开源的。请参阅。
要补充，如果您希望从末尾开始并反向检索列表项，下面是您的操作方法（我在代码更改的地方添加了注释）

从“rxjs/Observable”导入{Observable}；
从“rxjs/Subject”导入{Subject}；
导入rxjs/add/observable/defer”；
导入rxjs/add/observable/zip”；
导入rxjs/add/operator/concatMap”；
导入rxjs/add/operator/filter”；
导入rxjs/add/operator/first”；
导入rxjs/add/operator/map”；
导入rxjs/add/operator/scan”；
导入rxjs/add/operator/share”；
导入rxjs/add/operator/startWith”；
常数pageSize=100；
let notifier=新主题（）；
让最后一个：可见；
设无限列表=可观察
.zip（通知程序，可观察的.defer（（）=>last））
.concatMap（（[unused，last]）=>this.af.database.list（“任务”）{
查询：{
//使用limitToLast向上移动列表，而不是向下移动
limitToLast:last？（页面大小+1）：页面大小，
orderByChild:“发布日期”，
//使用endAt从列表的末尾开始
最后
}
})
.first（）
)
.scan（（附件，列表）=>{
//交换acc和list的角色，如我们所愿
//从头连接
如果（list.length>0）{
根据移位（）；
}
返回列表。concat（acc）；
}, [])
.share（）；
最后一个=无限列表
.filter（（list）=>list.length>0）
//使用此列表中的第一个子项作为下一个endAt值
.map（（列表）=>列表[0]。发布日期）
//使用undefined代替null，如angularfire2中的endAt:null
//将搜索最后一个为null的子级
.startWith（未定义）；
infiniteList.subscribe（（list）=>console.log（list））；
notifier.next（）；
notifier.next（）；
notifier.next（）；
整个列表是什么意思？你要求了5个项目。然后你要求了10个项目。前5个项目将是你要求的10个项目的一部分。这不是你的期望吗？我的意思是整个列表是从firebase请求的，因此再次加载已经加载的项目。这是一个预期的行为，但绝对不是eac所期望的行为h上限越高，加载时间越长。谢谢你的回答。我用了一种不同的方式解决了它。你的解决方案更漂亮。这是一个很好的RxJS课程。你也可以看一下问题的第二部分。我不知道是否应该是这样的；第二部分，你的意思是信息似乎被发送了两次吗？我是我将快速浏览一下它。关于WebStac的流量，显示了两次被检索的数据，你已经发现了我认为是一个bug。我在与angalFiff2团队谈论它。FY:相关的和一个我所见过的最具描述性的答案！解决了我的问题并且工作得很好，谢谢。这实际上是一个RXJS LES。儿子！