个人中心
gpt4 book ai didi

javascript - Angularfire2，startAfter()不适用于分页

转载 作者：行者123 更新时间：2023-12-04 17:44:31 25 4
gpt4 key购买 nike

根据 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:所以我所做的就是打开文档payload 并将我的可观察类型更改为 any 以防止冲突:)所以这是我在服务中的代码

  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);
    });
  }

最佳答案

看看下面的 HTML 页面，它显示(在纯 Javascript 中)如何修改 query 以便逐页显示文档。

您可以将其下载到本地文件夹/目录，调整配置对象并使用浏览器打开它。单击该按钮将在控制台中以 3 × 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>

关于javascript - Angularfire2，startAfter()不适用于分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52736962/

25 4 0
文章推荐： GITLAB CI 我在哪里可以找到自由运行者的日志
文章推荐： node.js - 为什么在使用 Typescript 时不需要 Node 的类型定义？
文章推荐： Python Kafka 客户端 - 没有错误但无法正常工作
文章推荐： python - 如何有效地按元素评估整个 Python 函数列表？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com