Angularfire2，startAfter() 不适用于分页答案

【问题标题】：Angularfire2, startAfter() not working for paginationAngularfire2，startAfter() 不适用于分页
【发布时间】：2018-10-10 09:29:58
【问题描述】：

根据 firebase 文档，这是如何做到的：

var first = db.collection("cities")
        .orderBy("population")
        .limit(25);

return first.get().then(function (documentSnapshots) {
  // Get the last visible document
  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
  console.log("last", lastVisible);

  // Construct a new query starting at this document,
  // get the next 25 cities.
  var next = db.collection("cities")
          .orderBy("population")
          .startAfter(lastVisible)
          .limit(25);
});

但问题是我看不到使用 get 函数甚至使用snapshotChanges() 来获取长度然后减去它以用作下一次获取的参考的方法。任何提示将不胜感激！

更新：

我尝试手动输入索引但无济于事，因为它返回了一个没有数据的数组。

   getNewsCollectionNext() {
    this.newsCollectionRef = this.afDB.collection('news', ref => 
    ref.where('news_is_deleted', '==', false).orderBy('news_timestamp_post_created', 'desc')
    .startAfter(1));
    this.newsCollection = this.newsCollectionRef.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as News;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
    return this.newsCollection;
   }

虽然这一项返回 3 个项目

   getNewsCollection() {
    this.newsCollectionRef = this.afDB.collection('news', ref => 
    ref.where('news_is_deleted', '==', false).orderBy('news_timestamp_post_created', 'desc'));
    this.newsCollection = this.newsCollectionRef.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as News;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
    return this.newsCollection;
    // console.log(this.newsList);
   }

更新 2：我使“下一个”功能起作用了！

tl;dr：所以我所做的就是打开文档有效载荷并将我的可观察类型更改为任何以防止冲突:) 所以这是我在服务中的代码

  getNewsCollection() {
    this.newsCollectionSubscription = this.newsService.getNewsCollection().
    subscribe(newsCollection => {
      this.newsCollection = newsCollection;
      console.log('t2est',newsCollection[newsCollection.length - 1].doc);
      if(newsCollection){
        this.snapshot = newsCollection[newsCollection.length - 1].doc;
      }

    });
  }
  getNextNewsCollection() {
    this.newsCollectionSubscription = this.newsService.getNextNewsCollection(this.snapshot).
    subscribe(newsCollection => {
      this.newsCollection = newsCollection;
      // console.log('t2est',newsCollection[1].doc);
      console.log(newsCollection);
    });
  }

在我的 news-card.component.ts 上

  getNewsCollection() {
    this.newsCollectionSubscription = this.newsService.getNewsCollection().
    subscribe(newsCollection => {
      this.newsCollection = newsCollection;
      console.log('t2est',newsCollection[newsCollection.length - 1].doc);
      if(newsCollection){
        this.snapshot = newsCollection[newsCollection.length - 1].doc;
      }

    });
  }
  getNextNewsCollection() {
    this.newsCollectionSubscription = this.newsService.getNextNewsCollection(this.snapshot).
    subscribe(newsCollection => {
      this.newsCollection = newsCollection;
      // console.log('t2est',newsCollection[1].doc);
      console.log(newsCollection);
    });
  }

【问题讨论】：

标签： javascript firebase google-cloud-firestore angularfire

【解决方案1】：

查看以下 HTML 页面，该页面显示（纯 Javascript）如何修改 query 以便逐页显示文档。

您可以将其下载到本地文件夹/目录，调整配置对象并使用浏览器打开它。单击该按钮将在控制台中显示文档 3 by 3。

请注意，在这个简单的 POC 中，当分页到达集合末尾时没有错误处理。

<html>
    <head>
        <script src="https://www.gstatic.com/firebasejs/5.5.3/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.5.3/firebase-firestore.js"></script>
    </head>

    <body>
        <button id="myBtn">Display next subset</button>

        <script>
            document.getElementById("myBtn").addEventListener("click", function () {
                displayNextPaginationSubset();
            });
          // Initialize Firebase
          var config = {
            apiKey: "....",
            authDomain: "....",
            databaseURL: "....",
            projectId: "...."
          };
          firebase.initializeApp(config);

          var db = firebase.firestore();
          var query = db.collection("cities")
              .orderBy("population")
              .limit(3);

          function displayNextPaginationSubset() {

              query.get().then(function (documentSnapshots) {

                  documentSnapshots.forEach(function(doc) {
                      // doc.data() is never undefined for query doc snapshots
                      console.log(doc.id, " => ", doc.data());
                  });


                  // Get the last visible document
                  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
                  console.log("last", lastVisible);

                  // Construct a new query starting at this document,
                  // get the next 3 cities.
                  query = db.collection("cities")
                          .orderBy("population")
                          .startAfter(lastVisible)
                          .limit(3);
              });

          }

        </script>

    </body>
</html>

【讨论】：

感谢您的回答！但是在angularfire2中真的没有办法做到这一点吗？伤心
对不起，我不知道 angular，所以我不能再帮你了。
请注意，实际上这只是在每次调用get() 后更新query 变量的问题。