Firebase分页使用带有值和键的startAt不起作用答案

【问题标题】：Firebase Pagination using startAt with value and Key not workingFirebase分页使用带有值和键的startAt不起作用
【发布时间】：2018-01-13 02:42:15
【问题描述】：

我正在尝试为 ionic3 开发的移动应用中的搜索页面设置分页。即使提供了键，搜索结果也始终只获取前 5 个值。我尝试输入不同的密钥，但问题仍然存在。请在下面找到代码

this.storeListRefss$ = this.db.list(`/productList/` + this.storeId + `/`, {
  query: {
    orderByChild: 'product_name_search',
    limitToFirst: 5,
    startAt:  { value: 'milk', key: '-L2Z8INhE8mFA4fWwiGk' },
    endAt: self.searchValue + "\uf8ff"
  }
});

this.storeListRefss$.subscribe((result) => {
  result.forEach((element) => {
    self.searchResults.push(element);
  });
  console.log(this.searchResults);
});

这是我从 Firebase 中提取的示例 json 数据

{
  "-L2Z8Gvp-T5O3r46dQO4" : {
    "product_desc" : "",
    "product_img" : "",
    "product_name" : "2-POCKET PAPER FOLDER",
    "product_name_search" : "2-pocket paper folder",
    "product_reg_price" : "0.7900",
    "product_sales_price" : "0.7900",
    "product_upc" : "718103177610",
    "status" : 1
  },
  "-L2Z8Gvp-T5O3r46dQO5" : {
    "product_desc" : "",
    "product_img" : "",
    "product_name" : "3 MUSKETEERS BITES",
    "product_name_search" : "3 musketeers bites",
    "product_reg_price" : "1.9900",
    "product_sales_price" : "1.9900",
    "product_upc" : "040000422471",
    "status" : 1
  }
}

【问题讨论】：

您能否更新您的问题以包含您正在查询的 JSON（作为文本，没有屏幕截图）。您可以通过单击Firebase Database console? 中的“导出 JSON”链接来获取此信息。如果您使用硬编码值而不是self.searchValue 和self.keyPagination 重现问题，那也很好，因为我们无法知道它们是什么。
@FrankvanPuffelen 我已经添加了 json 和硬编码的参考值。
您的 JSON 中没有属性 name_search。您可能打算使用product_name_search。
@FrankvanPuffelen 抱歉，我重新编辑了代码，在粘贴到 stackoverflow 时丢失了它。即使使用“ product_name_search ”，问题仍然存在

标签： javascript firebase firebase-realtime-database ionic2 angularfire2

【解决方案1】：

您使用的是旧版本的 AngularFire，它不支持查询 API 中 startAt() 或 endAt() 的第二个参数。

您有两个选择：升级到新的 api 或创建一个引用并将其传递给 list() 方法。我建议升级到更简单的新版本 5 API。但我会在下面详细说明。

选项 1 - 创建引用而不是使用查询 API

constructor(private db: AngularFireDatabase) {
  const ref = db.database.ref(`/productList/` + this.storeId);
  const query = ref
                 .orderByChild('product_name_search')
                 .limitToFirst(5)
                 .startAt('milk', '-L2Z8INhE8mFA4fWwiGk')
                 .endAt(self.searchValue + "\uf8ff");
  const list$ = db.list(query);
}

选项 2 - 升级到新 API

constructor(private db: AngularFireDatabase) {
  const list$ = db.list(`/productList/` + this.storeId, ref => {
    return ref
            .orderByChild('product_name_search')
            .limitToFirst(5)
            .startAt('milk', '-L2Z8INhE8mFA4fWwiGk')
            .endAt(this.searchValue + "\uf8ff");
  }).valueChanges();
}

【讨论】：