代码之家 › 专栏 › 技术社区 › KhoPhi

角材分页器

angular

7

KhoPhi · 技术社区 · 7 年前

我会非常具体地回答我的问题,希望得到同样具体的答案。

我在网上查过了 Angular docs on the subject 对于现实生活中的案例来说,这就像让你从海洋中拔出一根针一样含糊不清。哦,角度文档。。。

到目前为止我所做的

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

因此,在前面的序言中,我还需要完成哪些步骤才能使分页在考虑到这个条件的情况下工作:

分页不会一直到端点来为每个页面索引提取每个项列表。
在第一次从端点接收到1000个项之后,分页会将该长度的项向上分块本地在客户端。不再调用API。

3 回复 | 直到 7 年前

1

8

Frederik Struck-Schøning 7 年前

假设您已经在请求中加载了响应数据(数组)。

您可能可以使用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>

2

3

Frederik Struck-Schøning 7 年前

你可以用 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.

3

0

Hugo Licon 7 年前

我在这个例子中使用了GitHub API,您需要等待paginator上的事件,然后执行HTTP调用来获取数据

Angular Material Paginator example