Question

我有一个产品页面，可以随时过滤数据并限制向用户显示的项目数-所有这些都按预期工作。但是，我希望我的用户能够对数据进行分页-这样我可以减少读取次数。

我的查询可以很好地用于返回未过滤的数据或返回的文档数量受到限制的过滤数据，但是，当我单击创建的“下一个”按钮时，我执行的查询（使用startAfter）不返回任何文档。

查询为什么如此，除了包含startAfter之外，几乎完全相同，不返回任何文档或任何错误。

N.B：在我有“ console.log（this.infinite [1]）;”的地方，它返回“未定义”。供参考，我的藏书长20篇。

HTML：

<div class="container" *ngIf="infinite | async as products">
  <div class="row"></div>
  <div class="row">
    <div class="col-md-4" *ngFor="let p of products">
      {{ p.productName }}
    </div>
  </div>
  <button class="btn btn-primary" (click)="nextBatch(products[products.length - 1].productName)">Next</button>
</div>

TS：

 applyFilters() {
    /*reset all the filters if filters are already selected*/
    if (this.numFilters) {
      this.clearFilters();
    }

    /*check to see if the filters are either empty strings or underfiend, in which case load the full 
    list of products*/
    if (this.numFilters < 1) {
      console.log("loading all products");
      this.myQuery = this.db.collection("products", (ref) => ref.limit(5));
      this.infinite = this.myQuery.valueChanges();
    } 
  }

  clearFilters() {
    this.numFilters = 0;
    this.filterValues = [];
    this.filterSelected = [];
    this.colour = "";
    this.prodType = "";
    this.brand = "";
  }

  nextBatch(lastSeen) {
    console.log(lastSeen);
    this.infinite = this.db
      .collection("products", (ref) =>
        ref.orderBy("price").startAfter(lastSeen).limit(5)
      )
      .valueChanges();
    console.log(this.infinite[1]);
  }
}

Firestore“ startAfter”未返回文档

0 个答案: