Arrays 分页可观测阵列

我想显示从Firestore获取的文档列表。 我想在默认情况下显示5个文档，并显示一个“加载更多”按钮，单击该按钮将获取另外5个文档

对于静态列表，我会这样做，非常简单：

loadMoreInvoices() {
  //Get number of last item
  var lastItemInvoiceNumber = (this.invoices[this.invoices.length-1] as any).invoice_number;

  this.afs.collection('clients').doc(uid).collection('invoices', ref => ref.orderBy('invoice_number').startAt(lastItemInvoiceNumber).limit(5+1)).get().then(snap => {

    //Remove first elem from array as it is a duplicate
    snap.shift()
    //Add all loaded invoices to array
    snap.forEach(item => {
      this.invoices.push(item)
    })

    //Check if there are any more invoices to be loaded and set status accordingly
    if (snap.length < this.moreInvoicesToBeLoaded) {
      this.noMoreInvoices = true;
    } else {
      this.noMoreInvoices = false;
    }
  });
}

ngOnInit() {
    this.afs.collection('clients').doc(uid).collection('invoices', ref => ref.orderBy('invoice_number').limit(invoicesToBeLoaded)).get().then(snap => {
        if (invoices.length < this.invoicesToBeLoaded) {
            //Display "Load more" only if false
            this.noMoreInvoices = true;
        }
        this.invoices = invoices;
        this.loaded = true;
    })
}

loadMoreInvoices（）{
//获取最后一项的编号
var lastItemInvoiceNumber=（this.invoices[this.invoices.length-1]如有）。发票号；
this.afs.collection（'clients'）.doc（uid）.collection（'invoices'，ref=>ref.orderBy（'invoices\u number'）.startAt（lastItemInvoiceNumber）.limit（5+1））.get（）.然后（snap=>{
//从阵列中删除第一个元素，因为它是重复的
snap.shift（）
//将所有加载的发票添加到数组
snap.forEach（项=>{
此.发票.推送（项目）
})
//检查是否还有其他发票要加载，并相应地设置状态
如果（snap.lengthref.orderBy（'invoices\u number'）.limit（invoicesToBeLoaded））.get（）。然后（snap=>{
如果（发票长度<此发票长度）{
//仅当为false时显示“加载更多”
this.noMoreInvoices=true；
}
此项。发票=发票；
this.loaded=true；
})
}

如何使用可观察数据而不是静态数据获得相同的行为？

---

我在上面所做的方式会导致列表在

之后损坏。发票

会因可观察到的内容而发生更改。

借助

扫描

操作符，可以增量添加一些信息，该操作符允许您使用累加器并返回一个新值，该值将传递给消费者，并用作下一个可观察发射的累加器

你可以做这样的东西

source$ = this.page$.pipe(
  switchMap(page => this.getList(page)),
  // here the magic goes. We initialize scan with "[]" seed (otherwise only second
  // emit will be passed further as first one would be taken for the seed for accumulator)
  // and use concat which returns new array of concatenated "acc" and "vall"
  scan((acc, val) => acc.concat(val), [])
)

然后您只需在模板中使用

source$| async

，就可以增量地获取和更新数据（也称为无限滚动）

---

this.page$

是一个可观察的分页功能，用于对远程资源进行新调用。

d默认情况下显示5个文档，并显示一个“加载更多”按钮，单击该按钮将获取另外5个文档。这不是延迟加载-这是分页。谢谢，我相应地更改了出现次数。请提供更多上下文。你到底想归档什么？你能分享你目前拥有的stackblitz（）吗？@dmuenster你想从observable加载数据吗？我如何处理删除这个延迟加载列表中的项目？它们仍然会显示，因为旧的可观察值与新值的差值合并，对吗？@dmuenster这取决于你如何处理它。它显示您从

scan

回调返回的任何内容。如果从累加器中删除一些值并返回新的简化数组，它将显示此简化数组。