Бесконечная прокрутка с AngularFire2 Firestore

Question

Кажется, я нигде не могу найти пример того, что мне нужно, поэтому я попробую спросить здесь. Я нашел этот пример (https://angularfirebase.com/lessons/infinite-scroll-with-firebase-data-and-angular-animation/) однако, это для firebase, а не firestore. Там у меня около 90%, но у меня все еще есть проблемы.

У меня работает ngx-infinite-scroll, однако он продолжает повторять одни и те же данные снова и снова и никогда не попадает в конец списка базы данных.

Вот мои угловые компоненты ТС:

import { Component, OnInit, OnDestroy } from "@angular/core";
import { AngularFirestore, DocumentChangeAction } from "angularfire2/firestore";
import { map } from "rxjs/operators";
import { Observable } from "rxjs";
import * as _ from "lodash";

@Component({
  selector: "app-feed",
  templateUrl: "./feed.component.html",
  styleUrls: ["./feed.component.scss"]
})
export class FeedComponent implements OnInit {
  // path
  path = "feedItems";

  // add
  feedItems = [];
  status = [];

  // edit
  editStatus: boolean = false;
  itemID = "";

  // infinite scroll
  batch: number = 3; // size of each query
  last: any = "";
  empty: boolean = false;
  loading: boolean = false;

  constructor(private db: AngularFirestore) {}

  ngOnInit() {
    // original read - put into fetchItemsPaginated() function below to include infinite scroll - remove .limit() if it's not needed
    // this.db
    //   .collection(this.path, q => q.orderBy("timestamp", "desc").limit(5))
    //   .snapshotChanges()
    //   .subscribe(serverItems => {
    //     this.feedItems = [];
    //     serverItems.forEach(a => {
    //       let item: any = a.payload.doc.data();
    //       item.id = a.payload.doc.id;
    //       this.feedItems.push(item);
    //     });
    //   });

    this.fetchItemsPaginated();
  } // ngOnInit

  fetchItemsPaginated() {
    this.last = Date.now();
    this.paginate(this.batch, this.last)
      .pipe(
        map(data => {
          if (!data.length) {
            this.empty = true;
      }
      let last = _.last(data);

      if (last) {
        this.last = last.payload.doc.data().id;

        data.map(q => {
          this.feedItems.push(q.payload.doc.data());
        });
      }
    })
  )
  .subscribe();
  } // fetchItemsPaginated

  paginate(limit: number, last: any): Observable<DocumentChangeAction<any>[]> {
    return this.db
      .collection(this.path, ref =>
        ref
          .where("date", "<", last)
          .orderBy("date", "desc")
          .limit(limit)
        )
        .snapshotChanges();
   } // paginate (read function)

  onScroll() {
    this.loading = true;
    setTimeout(() => {
      this.fetchItemsPaginated();
      this.loading = false;
    }, 1500);
  } // onScroll

  add() {
    this.db.collection(this.path).add({
      timestamp: new Date(),
      date: Date.now(),
      status: this.status
    });
    this.status = [];
    this.fetchItemsPaginated();
  } // add

  edit(item) {
    this.editStatus = true;
    this.status = item.status;
    this.itemID = item.id;
    // console.log(this.itemID);
    // console.log(item);
  } // edit

  update() {
    this.db.doc(`${this.path}/${this.itemID}`).update({
      timestamp: new Date(),
      date: Date.now(),
      status: this.status,
      id: this.itemID
    });
    this.status = [];
    this.itemID = "";
    this.editStatus = false;
  } // update

  updateTimeStamp(item) {
    this.db.doc(`${this.path}/${item.id}`).update({
      timestamp: new Date()
    });
  } // updateTimeStamp

  cancelUpdate() {
    this.editStatus = false;
    this.status = [];
    this.itemID = "";
  } // cancelUpdate

  delete(item) {
    this.db.doc(`${this.path}/${item.id}`).delete();
  } // delete
} // FeedComponent OnInit

Я думаю, мне нужно как-то найти последний объект в моих данных, который отображается с ограничением (в функции fetchItemsPaginated ()). Когда он попадает в функцию onScroll (), он каким-то образом берет последний объект и запускает другой запрос, но я не уверен, как это сделать.

Вот HTML-код моего компонента

<div class="container mb-5" *ngIf="feedItems.length > 0">
  <div class="row">
    <div class="col">
      <div *ngFor="let item of feedItems">
        <div class="card mb-4">
          <div class="card-body">
            <p>{{ item.status }}</p>
            <small>{{ item.timestamp.toDate() | date: "fullTime" }}</small>
          </div>
          <div class="card-footer">
            <button class="btn btn-info mr-1" (click)="edit(item)">
              Edit
            </button>
            <button
              class="btn btn-success mr-1"
              (click)="updateTimeStamp(item)"
            >
              Update TimeStamp
            </button>
            <button class="btn btn-danger" (click)="delete(item)">
              Delete
            </button>
          </div>
        </div>
      </div>

      <!-- load more posts - infinite scroll - testing -->

      <div *ngIf="feedItems.length > 0 && !empty">
        <div
          *ngIf="loading"
          class="alert alert-warning d-block text-center position-absolute"
        >
          Loading more items...
        </div>
        <div
          class="search-results"
          infiniteScroll
          [infiniteScrollDistance]="2"
          [infiniteScrollThrottle]="50"
          (scrolled)="onScroll()"
        ></div>
      </div>

      <div *ngIf="empty" class="alert alert-primary d-block text-center">
        End of items in database... That's all folks!
      </div>
    </div>
  </div>
</div>

Для этого я думаю, что мне нужно выполнить _.split с моими данными из последнего объекта данных, показывая затем _.concat их вместе. Любая помощь с этим была бы великолепна.