Angular4.+ ngx-bootstrap 搜索并初始化页数

发布时间：2019-10-28 16:30:45 修改时间：2019-10-28 16:35:30 阅读：5465 评论：0 0

使用Angular4.+ ngx-bootstrap Pagination 搜索并初始化页数


此时分页使用可以正常进行页数切换并获取指定页数




问题点：点击条件查询后如果之前点击分页页数不在第一页（比如此刻在第6页内容时），但是传入后台的条件与页数为当前页获取的数据会根据条件查询出并显示第6页内容，如果数据不够6页则显示当前数据的最大页。




解决思路：每次入参查询当前页设置为0（此值与后端人员协商，也可开始值为1），经研讨此方法每次调用与页码改变事件动态获取数据产生冲突，那么两者做一下if判断区分事件类型。

页码需要动态绑定初始页 [(ngModel)]="currentPage" 此属性不可与其他属性有关联

解决方法：

//查询按钮方法

(click)="this.advertisementVideoList('')";

//pagenation 页码改变方法

<pagination [totalItems]="contentListTotalPage"

                 class="pagination-sm" 

                 [firstText]="'第一页'" 

                 [lastText]="'最后一页'" 

                 [maxSize]="5" 

                 [previousText]="'前一页'"

                 [nextText]="'后一页'"

                 [boundaryLinks]="true" [rotate]="false"

                  [(ngModel)]="currentPage"

                  (pageChanged)="onPageChangeVideo($event,tableAlert)">

</pagination>

onPageChangeVideo(event: any) {

        this.contentListPage = event.page - 1;

        this.advertisementVideoList('page');

}

//获取数据方法

advertisementVideoList (type) {

       //数据初始化

        this.contentList = [];

       //入参

        this.orgId = systemconst.currentUser.organization.id;

        const obj = {

            'topOrgId': this.currentUser.topOrganization.id,

            'currentPage': this.contentListPage,

            'sizePerPage': 10

        }

        //这里判断 ：如果type不存在则拟定类型为

        if(!type){

            obj.currentPage = 0;

            currentPage = 0;

        }

        //数据请求

        this.presetVideo.advertisement(obj).subscribe(data => {

                this.contentList = data.data.content;

                this.contentListTotalPage = data.data.totalElements;

        })

}

---