时间戳

首页 > 解决方案 > 仅获取特定页面的列表数据

angular - 仅获取特定页面的列表数据

问题描述

我在这里有一个列表，我通过使用服务从后端获取数据。我最多从后端获取 20 条记录，但如果我将通过一个服务请求从后端获取 2000 条记录，系统可能会变慢，所以我希望每页只显示 10 条记录，每次点击下一页我希望该服务从后端获取接下来的 10 条记录。我怎样才能做到这一点？这个实现需要在后端还是前端完成？对不起，如果我不能以最好的方式提出问题，但我是初学者，所以请帮助我。

HTML 代码

<div class="row clearfix" [@routerTransition]>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="card main-content" >
        <div class="header">
            <h2>
                {{l('Schools')}}
            </h2>
            <ul class="header-dropdown m-r--5">
                <i class="fa fa-spin fa-spinner" *ngIf="isTableLoading"></i>
                <li class="dropdown">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="material-icons">more_vert</i>
                    </a>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="javascript:void(0);" class=" waves-effect <waves-block></waves-block>" (click)="refresh();"><i class="material-icons">refresh</i> Refresh</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="body table-responsive" style="padding-bottom: 40px">
            <table class="table table-hover table-striped" >
                <thead>
                    <tr>
                        <th>{{l('Name')}}</th>
                        <th>{{l('Registration Number')}}</th>
                        <th>{{l('Enrollment Type')}}</th>
                        <th>{{l('Entity Type')}}</th>
                        <th>{{l('Location')}}</th>
                        <th>{{l('Actions')}}</th>


                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let school of schoollists | paginate: { id: 'server', itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItems }; let i = index">
                        <td>{{school.name}}</td>
                        <td>{{school.registrationNumber}}</td>
                        <td>{{school.educationType}}</td>
                        <td>{{school.administrativeType}}</td>
                        <td>{{school.county}}<span>,</span>{{school.city}}<span>,</span>{{school.district}}</td>

                        <td class="dropdown">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                <i class="material-icons">menu</i>
                            </a>
                            <ul class="dropdown-menu pull-right">
                                <li *ngIf="supportAdminCheck"><a class="waves-effect waves-block" (click)="editSchool(school.schoolTenantName)"><i class="material-icons">create</i>Edit</a></li>
                                <li *ngIf="supportAdminCheck"><a href="javascript:void(0);" class="waves-effect waves-block" (click)="delete(school)"><i class="material-icons">delete_sweep</i>Delete</a></li>
                                <li><a class="waves-effect waves-block" (click)="schoolDetail(school.schoolTenantName)"><i class="material-icons">details</i>View</a></li>
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>

           <div class="text-align: center;" *ngIf="totalItems > pageSize">
                <pagination-controls (pageChange)="getDataPage($event)" id="server"></pagination-controls>
            </div>
            <!-- <br> -->
            <button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createRole()">
                <i class="material-icons">add</i>
            </button>
        </div>
    </div>
</div>

打字稿代码

  list(request: PagedRequestDto, pageNumber: number, finishedCallback: Function): void {
    this._schoollistService.getAll()
        .finally( ()=> {
            finishedCallback();
        })
  .subscribe((result: PagedResultDtoOfSchoolListDto)=>{
            this.schoollists = result.items;
            this.showPaging(result, pageNumber);
            this.supportAdminCheck = false;
            if (this.appSession.tenant === undefined && this._utilsService.getCookieValue(AppConsts.authorization.roleName) === 'SuperAdmin') {
                this.supportAdminCheck = true;
            } else {
                this.supportAdminCheck = false;
            }
    });

}

标签： angulartypescript

解决方案

您使用哪个 api 框架？

大多数框架都支持这个通用特性，并且可以自定义分页（订单标准、项目数......）。

在大多数情况下，分页需要在后端实现，并由客户端使用，例如：

www.server.com/api/v0.1/my-resource?page=1

您可以PaginationService使用 Angular HttpClient 来实现，例如：

private currentPage = 1;

getNextPage(): Observable<Resource[]> {
    this.currentPage += 1;
    return this.http.get<Resource[]>(BASE_URL + 'resource' + '?page=' + this.currentPage);
}

getPreviousPage(): Observable<Resource[]> {
    this.currentPage -= 1;
    return this.http.get<Resource[]>(BASE_URL + 'resource' + '?page=' + this.currentPage);
} 

goToPage(page: number): Observable<Resource[]> {
    this.currentPage = page;
    return this.http.get<Resource[]>(BASE_URL + 'resource' + '?page=' + this.currentPage);
}

将您的服务注册为NgModule上的Provider（或组件级别，如果需要）。

推荐阅读