Question

我在Angular应用程序中使用observable来从我们的API加载数据。因为有很多内容可供使用，我们正在使用ng2-pagination来处理分页，我们正在尝试将其设置为为每个加载的页面提取数据。所以，换句话说，最初我们会在第一页加载时拉出前15个结果。其他页面也会加载特定于这些页面的数据，只有在单击页码时才会加载。

现在，我可以确认这个api调用正在工作，因为当我在Postman中运行它时，我得到了一组有限的结果 - 而不是整个集合 - 正如预期的那样。

然而，这就是说，当我尝试使用Angular应用程序中使用的可观察对象插入时，我发现它仍在拉动整个集合。

这就是我对api电话的看法（这里'page'代表页码，'pagesize'代表每页的结果）：

getByCategory(category: string, page, pagesize) {
    const q = encodeURIComponent(stage);
    return this.http.get
    (`https://api.someurl.com/${this.ver}/clients/category/${q}?apikey=${this.key}&page=${this.page}&pagesize=${this.pagesize}`)
        .map((response: Response) => response.json())
        .catch(this.stageErrorsHandler);
}
    stageErrorsHandler(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

在我的组件中，我订阅了这样，并请求第1页，返回了12个结果：

ngOnInit() {
   this.clientService.getByCategory('consulting', 1, 12)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            console.log(this.records);
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
}

然后，在视图中，我迭代数组，并通过分页管道传递项目，如下所示：

<tr *ngFor="let record of records.data | paginate: { id: 'clients', itemsPerPage: 12, currentPage: page, totalItems: records.count }">

    <pagination-controls class="paginator" (pageChange)="page = $event" id="clients"
            maxSize="15"
            directionLinks="true"
            autoHide="true">
    </pagination-controls>

顺便说一句，api调用返回总计数以及对象数组 - 因为分页工具使用它来确定要加载的页数。所以api看起来像这样 - 'data'是记录的集合，'count'是记录的总数：

{
  "count": 10438,
  "data": [
    {
      "id": "someId",
      "name": "someName"
    }
      ]

当我在ngOnInit生命周期中控制日志（this.records）时，返回的不是12个结果的有限列表，如预期的那样，而是整个集合。这是我在控制台中看到的：

对象{count：10728，data：Array（4037）}

我不知道为什么我会收到整个系列。正如我所提到的，当我使用Postman尝试时，这个调用有效 - 但似乎没有像预期的那样工作。

关于我在这里缺少什么的想法？我如何使用observable有问题吗？

Answer 1

您是否在Chrome开发工具的网络标签中查看了生成的服务电话网址？你的网址模板是：

https://api.someurl.com/${this.ver}/clients/category/${q}?apikey=${this.key}&page=${this.page}&pagesize=${this.pagesize}

正确渲染？由于您将params（category：string，page，pagesize）传递给函数，因此请尝试在没有“this”的情况下引用它们。 - 例如$ {页}

角度应用程序拉入整个集合，而不是按预期的有限结果

1 个答案: