Angular 5中的分页索引号

Posted 2023-03-13

【中文标题】Angular 5中的分页索引号

【英文标题】：Pagination index Number in Angular 5

【发布时间】：2018-12-05 22:53:21

【问题描述】：

我正在处理一个在 Angular 5 中使用 WordPress API 的项目。我使用了材质网格以及过滤和分页。我面临索引问题，比如我总共有 100 个条目，但我想在单页中显示 50 个。当我单击下一步时，接下来的 50 个条目显示在网格中，但索引号再次从 1 到 50 而不是 51 到 100 开始。 如何获取最后一页索引号并与下一页连接。

过滤

<div class="example-header">
  <mat-form-field>
    <input matInput type="text" placeholder="Component" aria-label="Number" [matAutocomplete]="autocom" #component>
    <mat-autocomplete #autocom="matAutocomplete" (optionSelected)="dropDown($event.option.value,region.value,sector.value,stats.value,page)">
      <mat-option [value]="" style="font-size: 14px;">
        ALL
      </mat-option>
      <mat-option *ngFor="let option of options" [value]="option" style="font-size: 14px;">
         option 
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <mat-form-field>
    <input matInput type="text" placeholder="Region" aria-label="Number" [matAutocomplete]="autoreg" #region>
    <mat-autocomplete #autoreg="matAutocomplete" (optionSelected)="dropDown(component.value,$event.option.value,sector.value,stats.value,page)">
      <mat-option [value]="" style="font-size: 14px;">
        ALL
      </mat-option>
      <mat-option *ngFor="let option of regions" [value]="option" style="font-size: 14px;">
         option 
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
<div>

分页

<mat-paginator #pagination [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = dropDown(component.value,region.value,sector.value,stats.value,$event)"
    #page>
  </mat-paginator>

组件.ts

pageEvent: PageEvent;

  totalPageSize = 1;
  length: number;
  pageIndex: number = 1;
  pageSize: number = 100;
  pageSizeOptions: number[] = [10, 25, 50, 100];

loadData() 
    this.spinnerService.show();
    this.subscription = this.grantsearchservice.getStarterApi(this.component, this.region, this.sector, this.stats, this.pageIndex, this.pageSize)
      .subscribe(
        (grantsearch: any) => 
          this.grantsearchs = grantsearch.body;
          this.dataSource = new MatTableDataSource(this.grantsearchs);
          this.totalPageSize = grantsearch.headers.get('X-WP-TotalPages');
          this.setPagination(grantsearch.headers.get('x-wp-total'), this.pageIndex, this.pageSize);
          this.spinnerService.hide();
        
      );
  

【参考方案1】：

我想你一定有一些喜欢

   <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> element.position </td>
    </ng-container>

只需将 element.position 更改为 element.position+pageSize*(pageIndex-1)

   <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> element.position+pageSize*(pageIndex-1)

【讨论】：

它对我很有帮助，谢谢我这样做了。它对我有用 No. ​​eader-cell> pageNumberIndex + i