javascript - 使用带有值和键的 startAt 的 Firebase 分页不起作用

Question

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

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

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