Question

我要非常具体地回答我的问题，希望能得到同样具体的答案。

我已经在网上进行梳理，Angular docs on the subject对于现实生活中的案件来说含糊不清，就像要求您从海洋中挑针一样。哦，Angular文档...

到目前为止我所做的

  <mat-paginator (page)="pageEvent = $event" #paginator [length]="pageLength" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">
  </mat-paginator>

这在我的组件中

  pageLength: number;
  pageSize: 5;
  pageSizeOptions = [5, 10, 25, 100];

，然后在端点响应进入时更新pageLength：

  loadRequests() {
    this.busy = true;
    this.request_service.get_requests()
      .subscribe((res) => {
        console.log(res);
        this.requests = res['requests'];
        this.pageLength = this.requests.length; // let's assume length = 1000
      });
  }

上面的渲染在浏览器中很好地渲染了分页的UI

为简便起见，通过.get_requests()使用的端点仅返回1000个固定项。

现在，这是我现在呈现列表的方式：

<mat-card *ngFor="let request of requests">
  <mat-card-title> {{ request.title }}</mat-card-title>
</mat-card>

因此，使用上述前言，我需要完成哪些步骤来使分页在这种情况下起作用：

分页并不会一直到端点来为每个pageIndex提取每个项目列表。
首先从端点接收到1000个项目后，然后分页在客户端的本地上分块该长度的项目。不再有API调用。

Answer 1

假设您已在请求中加载了响应数据（数组）。

您可能可以使用splice方法创建一个从requests属性返回一组数据的方法。

因此，在API订阅结果上，可以在第一次加载时像这样处理：

this.request_service.get_requests()
  .subscribe((res) => {
    this.pageLength = res['requests'].length;
    this.splicedData = res['requests'].slice(((0 + 1) - 1) * this.pageSize).slice(0, this.pageSize);
  });

其中pageSize在前面已经定义为默认值。

然后，只要用户更改模板中的mat-paginator组件，就会运行pageChangeEvent。模板如下：

  <mat-paginator (page)="pageChangeEvent($event)" [length]="pageLength" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">
  </mat-paginator>

然后它对应的组件方法是这个。

 pageChangeEvent(event) {
    const offset = ((event.pageIndex + 1) - 1) * event.pageSize;
    this.splicedData = this.requests.slice(offset).slice(0, event.pageSize);
  }

最后，您的*ngFor可以使用splicedData数组来填充自身。

<mat-card *ngFor="let request of splicedData">
    <mat-card-title> {{ request.title }}</mat-card-title>
</mat-card>

Answer 2

您可以使用mat-table，它与mat-paginator集成得很好。隐藏标题并更改样式以使其看起来像您想要的样式。

组件：

displayedColumns: string[] = ['requests'];
dataSource: MatTableDataSource<{request: number}>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

constructor() {
 this.dataSource = new MatTableDataSource(values);
}

ngOnInit() {
 this.dataSource.paginator = this.paginator;
 this.dataSource.sort = this.sort;
}

模板：

<table mat-table [dataSource]="dataSource" matSort>

 <!-- Requests Column -->
   <ng-container matColumnDef="requests">
     <th mat-header-cell *matHeaderCellDef mat-sort-header/>
     <td mat-cell *matCellDef="let row"> {{row.request.title}} </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="displayedColumns"/>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;">
   </tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"/>

Here is a running example.

Answer 3

在此示例中，我使用GitHub API，您需要等待分页器上的事件，然后执行HTTP调用以获取数据

Angular Material Paginator example

Answer 4

<mat-paginator [length]="pagelength"
                  [pageSize]="pageSize"
                  [pageSizeOptions]="pageSizeOptions"
                  [showFirstLastButtons]="true"
                  (page)="goToPage($event)">
    </mat-paginator>




  public goToPage(pageEvent:PageEvent){
// the pageIndex is 0 in Mat-paginator
    this.pagelength = pageEvent.pageIndex+1;
    this.pageSize = pageEvent.pageSize;

    this.loadRequests(
      this.pageLength,
      this.pageSize,

    );
  }
  private _loadRequests(
    page: number,pageSize:number
  ) {
    this.RequestService.getAllRequests(
      page,pageSize
    ).subscribe((response) => {
      this.requests = response.requests;
    this.totalRequests = response.count;
    }, (error) =>
        );
  }

角材料分页器

4 个答案: