角度材質分頁器

Question

我會非常具體地回答我的問題，希望得到同樣具體的答案。

我在網上梳理過，關於這個主題的Angular 文檔對於現實生活中的案例來說就像要求你從大海中挑一根針一樣模糊。 哦 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時更新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

假設您已經在 requests 中加載了響應數據（數組）。

您可以使用 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]"/>

這是一個運行示例。

Answer 3

我在這個例子中使用了 GitHub API，你需要等待分頁器上的事件，然后進行 HTTP 調用以獲取數據

角度材質分頁器示例

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