Angular 8:mat分頁不能選頁

Question

我在 app.component.html 中的墊子分頁器：

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

我的 controller：

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

我可以更改頁面大小，但我無法打開其他頁面。 < > 不適合我

在 postman 中一切正常，但在這里它不起作用。

我的服務方法看起來如何：

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

Controller 方法：

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