Angular 8：mat分页无法选择页面

Question

我在 app.component.html 中的 mat-paginator：

<mat-paginator [pageSizeOptions]="[5, 15, 30]" [pageSize]="5" [length]="totalElements"
                      (page)="nextPage($event)">

</mat-paginator>

应用组件：

  totalElements = 5;

  // tslint:disable-next-line:typedef
  nextPage(event: PageEvent) {
    const request = {};
    // @ts-ignore
    request.page = event.pageIndex.toString();
    // @ts-ignore
    this.totalElements = request.size = event.pageSize.toString();
    // @ts-ignore
    this.getDevelopers(request);
  }

获取开发者：

  public getDevelopers(request: {page: string, size: string}): void {
    this.loading = true;
    this.developerService.getAllUsers(request)
      .subscribe(data => {
        // @ts-ignore
        this.users = data.content;
        // @ts-ignore
        this.totalElements = data.totalElements;
        this.loading = false;
      }
  }

我的控制器：

    @GetMapping
    @ResponseBody
    @ApiOperation(value = "Get list of all developers")
    public Page<GetByIdDeveloperResponse> getAllDevelopers(
            @RequestParam(name = "page", defaultValue = "0") int page,
            @RequestParam(name = "size", defaultValue = "4") int size,
            @RequestParam(name = "sort_by", defaultValue = "id") String sortBy
    ) {
        Page<GetByIdDeveloperResponse> developers = developerMapper.getDeveloperResponseListFromDeveloperList(developerService.getAllDevelopers(page, size, sortBy));
        return new PageImpl<GetByIdDeveloperResponse>(developers.getContent(), PageRequest.of(page, size), developers.getTotalElements());
    }

我可以更改页面大小，但无法打开其他页面。 不适合我

在邮递员中一切正常，但在这里不起作用。

我的服务方法看起来如何：

    public List<Developer> getAllDevelopers(int page, int size, String sortValue) {
        logger.info("Get all developers was called, page: " + page + " size: " + size + " sort by: " + sortValue);
        Pageable paging = PageRequest.of(page, size, Sort.by(sortValue));
        Page<Developer> pagedResult = developerRepository.findAll(paging);
        return pagedResult.getContent();
    }

存储库的外观：

@Repository
public interface DeveloperRepository extends PagingAndSortingRepository<Developer, String> {
    Developer findById(String id);
}

json 的样子：

当我尝试 GET .../developers?size=10

我总共有 10 个元素，我认为问题与 "totalPages": 1, 有关 因为即使我得到所有元素，也只有 1 页

调试：

Answer 1

当您执行return pagedResult.getContent() 时，您的服务方法中的分页结果数据（页码、页面大小等）会丢失。

考虑以下几点：

服务方式：

public Page<Developer> getAllDevelopers(int page, int size, String sortValue) {
    logger.info("Get all developers was called, page: " + page + " size: " + size + " sort by: " + sortValue);
    Pageable paging = PageRequest.of(page, size, Sort.by(sortValue));
    return developerRepository.findAll(paging);
}

控制器方法：

@GetMapping
@ApiOperation(value = "Get list of all developers")
public Page<GetByIdDeveloperResponse> getAllDevelopers(
        @RequestParam(name = "page", defaultValue = "0") int page,
        @RequestParam(name = "size", defaultValue = "4") int size,
        @RequestParam(name = "sort_by", defaultValue = "id") String sortBy
) {
    return this.developerService.getAllDevelopers(page, size, sortBy)
           .map(this.developerMapper::mapToGetByIdDeveloperResponse)
}