Question

我在这里有一个列表，其中我通过使用服务从后端获取数据。我从后端最多获取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>

TypeScript代码

  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;
            }
    });

}

Answer 1

您使用哪个api框架？

大多数框架都支持此通用功能，并且可以自定义分页（订单条件，项目数量...）。

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

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

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

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 （或组件级，如果需要）上将您的服务注册为提供者。

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

1 个答案: