程序员经验分享-hwhale

Angularfire2，startAfter() 不适用于分页

2024-01-01

根据 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()得到长度然后减去它作为下一次获取的参考。任何提示将非常感谢！

Update:

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

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

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

您可以将其下载到本地文件夹/目录，调整配置对象并使用浏览器打开它。单击该按钮将在控制台中显示 3 x 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Angularfire2，startAfter() 不适用于分页 的相关文章

随机推荐

  • 异步执行与同步执行。有什么不同？ [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 Locked 这个问题及其答案是locked help locked posts因为这个问题是题外话 但却具有历史意义 目前不接受新的

  • 将 SearchField 添加到从 Firestore 读取的 StreamBuilder

    我有一个程序 可以从 Firebase 的云 Firestore 获取用户列表 并使用 Flutter 中的 StreamBuilder 将它们显示在列表视图中 用户数量会很大 我想在我的流构建器中实现一个搜索字段 它将查询与我的搜索字段匹

  • 河内塔柜台

    我已经为河内塔游戏编写了代码 我不知道如何实现该程序运行次数的计数器 任何帮助都感激不尽 public class MainClass public static void main String args int nDisks 3 doT

  • 如何使用 Flutter 或者 Rails 从头开始​​构建移动应用程序？

    我是 Rails Web 后端和前端开发人员 我想构建一个移动应用程序 一个简单的应用程序 包含产品 用户 地理定位 可能还包含付款 使用 Stripe 等第三方 我认为Flutter框架是一个不错的选择 看起来很简单 但我不知道 Dart

  • 在使用 Spotify 的 Spotipy 缓存令牌时遇到问题？

    我正在尝试使用 Spotipy 访问用户的 Spotify 库 但遇到了一些麻烦 作为背景 我使用 Flask SQLAlchemy 和 Flask Login 我看着本教程 https github com sheagcraig actu

  • pycharm_helpers 的拉取访问被拒绝，存储库不存在或可能需要“docker 登录”

    我正在尝试在 docker 容器内运行 pycharm 调试器 这在过去对我有用 所以我知道我的配置是正确的 但是在我的一次 docker 容器清除期间 我必须删除 pycharm 需要的容器 pycharm helpers 不幸的是 py

  • 将非 ASCII 字符替换为单个空格

    我需要用空格替换所有非 ASCII x00 x7F 字符 令我惊讶的是 这在 Python 中并不容易 除非我遗漏了一些东西 以下函数只是删除所有非 ASCII 字符 def remove non ascii 1 text return j

  • 验证生成的 JAXB 类（JSR 303 / Spring）

    我使用 JAXB maven jaxb2 plugin 从架构 请求和响应 生成域对象我想为几个属性添加验证 notnull empty 我想要自定义 Bean 验证 该应用程序是一个 REST 服务 我正在使用 Spring 3 和 JS

  • VBA Excel 形状

    我使用了一个小子程序将图片插入到我的工作表中 ActiveSheet Pictures Insert URL Select 这适用于 Excel 2003 Windows 但不再适用于 Excel 2011 Mac 因此我修改了我的子程序

  • 为每一行创建的 Pandas DataFrame

    我正在尝试将 JSON 数据从 API 传递到 Pandas DataFrame 我无法得到pandas read json处理 API 数据 所以我确信这不是最好的解决方案 但我目前有for loop运行 JSON 来提取我想要的值 这是

  • 在 AWS 上使用 Apache-Spark 加载数据

    我正在 Amazon Web Service AWS EC2 上使用 Apache Spark 来加载和处理数据 我创建了一个主节点和两个从节点 在主节点上 我有一个目录data包含所有要处理的csv格式的数据文件 现在 在我们提交驱动程序

  • Android Eclipse 问题无法创建 BuildConfig 类

    我在 Eclipse 中清理 Android 项目时收到 无法创建 BuildConfig 类 错误 我最近为移动开发人员安装了 Eclipse Juno 当我尝试导入现有的 Android 应用程序时 Eclipse 开始出现这种错误 如

  • 使用 consteval 代替 constexpr 函数有哪些优点？

    我知道需求的差异 我最感兴趣的是它带来的代码质量带来的好处 我能想到的几件事 读者只需阅读函数签名即可知道该函数是在编译时评估的 编译器可能会发出更少的代码 因为constevalfns 在运行时从不使用 这是推测 我没有这方面的真实数据

  • 数据库中什么是半连接？

    我在尝试理解半连接的概念以及它与传统连接的不同之处时遇到了麻烦 我已经尝试过一些文章 但对解释不满意 有人可以帮助我理解它吗 简单的例子 让我们使用左外连接选择成绩的学生 SELECT DISTINCT s id FROM students

  • 如何使用回调函数在 TypeScript 中保留词法范围

    我有一个 TypeScript 类 其中有一个我打算用作回调的函数 removeRow this MyClass void this is now the window object I must use this to get the c

  • Windows Python (<=3.10.2) 无法运行 `python -m venv .venv`

    此问题已解决 并向 Python org 提交了错误报告 看看我的下面自我回答 https stackoverflow com a 71041562 4516027寻求解决方法 直到在未来版本的 Python 中修复为止 我的一台电脑被这个

  • LIBGDX 创建主菜单

    所以我想为我的游戏创建一个主菜单 但我不知道下一步该做什么 我已经完成了所有的艺术工作 并且全部分层并打包在 pack 中 public class MainMenu implements Screen CrazyZombies game

  • 使用比较器的意外输出

    我有以下程序 import java util public class Test public static void main String args Integer array 3 1 4 1 5 9 Arrays sort arra

  • MYSQLi真实转义函数显示换行符和回车符

    我有一个文本区域 当我尝试通过 MYSQLi 真实转义函数和 nl2br 进行转义和清理时 简单的输出给了我奇怪的结果 我的PHP代码 the odd输出是 i love this r n r nand this is gonna be f

  • Angularfire2，startAfter() 不适用于分页

    根据 firebase 文档 这是如何做到的 var first db collection cities orderBy population limit 25 return first get then function documen

热门标签