0

我正在尝试使用NgxPagination编码分页。但我不知道如何将pageIndex从组件传递到服务。它只显示一页。并且无法转到下一页。图片参考

我提供了下面的代码供您参考。

HTML

<ng-container
  matColumnDef="{{ column }}"
  *ngFor="let column of columnsToDisplay | paginate: { id: 'server',
  itemsPerPage: 10, currentPage: p, totalItems: total }"
          >... </ng-container>    
<pagination-controls (pageChange)="loadData($event)" id="server"></pagination-controls>

组件 ts

length:number;
  pageIndex :number;
  p: number = 1;
  total: number;

  loadData(pageIndex){

  this.listservice.getListService(pageIndex).subscribe(res =>{
      this.dataSource = new MatTableDataSource<ListDetails>(res);

  this.total = res.total;
  this.p = pageIndex;

}

在我的服务代码中，我制作如下

服务

getListService(page:number): Observable<any>  {
    const urls: string = `http://192.168.0.101:9080/projek/api/listall/${Id}`
   const rUrl: string = `${urls}/${page + 1}/desc`;
    return this.http.get<AllDetails>(rUrl).pipe(map(res => res['allList']));
  }

我应该添加什么才能使其正常工作。

希望大家能帮帮我

提前致谢。

4

2 回答 2

0

无论如何，您是否忘记在 mattable 的数据源上添加分页管道？就像是

<table mat-table [dataSource]="listData | paginate { ... }">
  ...
</table>
于 2019-08-20T07:35:10.563 回答
0

你必须改变

<pagination-controls (pageChange)="loadData($event)" id="server"></pagination-controls>

至

<pagination-controls (pageChange)="loadAgents($event)" id="server"></pagination-controls>

因为您的组件中没有loadData方法

于 2019-08-20T05:08:07.307 回答