Question

我在搜索时遇到分页问题。分页工作正常但是当我使用搜索框并输入一些字母时，结果会有所不同。由于结果不同，分页行为不规则。

我正在使用PaginationModule

中的'ng2-bootstrap'

我正在使用分页获取users列表。这是我的users.component.ts

export class UserListComponent implements OnInit {
     users: IUser[];
     term : string = '';

     public itemsPerPage: number = 1;
     public totalItems: number = 0;
     public currentPage: number = 1;

  ngOnInit() {
    this.getUsers();
  }

  getUsers(){
    this.dataService.getUsers(this.currentPage, this.itemsPerPage)
        .subscribe((users: PaginatedResult<IUser[]>) => {
                this.users = users;
            this.totalItems = users['pagination']['TotalItems'];       
        });
    }

  pageChanged(event: any, term: string): void {
      this.currentPage = event.page;
       if(term != '')
          this.search(term);
       else
        this.getUsers();
  }

  search(term) {
    this.dataService.searchUserList(term, this.currentPage, this.itemsPerPage)
        .subscribe((items : PaginatedResult<IUser[]>) => {
            this.totalItems = items['pagination']['TotalItems'];
            this.users = items;
      });
   }
}

这是users.component.html

     //Search input box
 <input #term (keyup)="search(term.value)" value="" class="form-control" placeholder="Search" autofocus>
     //pagination
 <pagination [boundaryLinks]="true" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage" class="pagination-sm"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" (pageChanged)="pageChanged($event, term.value)"></pagination>

问题是当我在page:3并搜索某些内容时...我得到的结果在搜索后只有1页然后我收到了此错误

ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: '3'. Current value: '1'.

我知道这是因为我在page:3并且在搜索结果之后我只有1 page，这就是为什么分页行为不合理的原因。

有没有解决方案？

在Angular2中使用搜索选项进行分页

0 个答案: