我正在访问一个atm检索超过1000个数据对象并将其返回给用户的api端点。
我认为这样做效率不高,因为一次只能查看30个对象。
有没有一种方法可以更有效地加载这些对象(即一次加载30个对象),尤其是当我将其与ngx-datatable集成在一起时。
我的api允许这样做...只需将以下参数添加到URL:
分页结果(设置page = $ {pageNumber}和 限制= $ {maxResultsOnPage}),例如将结果限制为每页5条讲道 并获得第二页:
curl --request GET \
--header 'content-type: application/json' \
--url 'http://localhost:8080/sermon?limit=5&page=2'
sermon.component.ts
public getAllSermons() {
this.sermonSubscription = this.apiService.getAllSermons().subscribe((data: Array<object>) => {
this.sermons = data;
this.totalCount = Object.keys(this.sermons).length;
this.logger.debug(`${data.length} sermons loaded`);
this.isSermonsLoaded = true;
});
}
sermon.component.html
<ngx-datatable class="material fullscreen" [rows]="sermons" [loadingIndicator]="loadingIndicator"
[selected]="selected" [selectionType]="'single'" [columnMode]="'force'" [headerHeight]="50"
[footerHeight]="50" [rowHeight]="'auto'" [limit]="30" (select)='onSelect($event)'>
<ngx-datatable-column name="Date" [width]="80"></ngx-datatable-column>
<ngx-datatable-column name="Speaker" [width]="200"></ngx-datatable-column>
<ngx-datatable-column name="Name" [width]="600"></ngx-datatable-column>
</ngx-datatable>
api.service.ts
public getAllSermons() {
return this.httpClient.get(`${this.apiUrl}/sermon?orderBy=date&sortAscending=false`).pipe(map((data: any) => data.data)
);
}
答案 0 :(得分:0)
使用ngx-datatable,您可以将输入externalPaging
设置为true,并监听事件page
。
以下是文档中的一个示例:https://github.com/swimlane/ngx-datatable/blob/master/demo/paging/paging-server.component.ts