Firebase分页使用startAt值和键无法正常工作

时间:2018-01-11 13:47:44

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

我正试图在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);
});

这是从火力基地拉出的样本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
  }
}

1 个答案:

答案 0 :(得分:2)

您使用的是旧版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();
}