angular - Angular 5中的分页索引号

Question

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

Filtering

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

Pagination

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

component.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();
        }
      );
  }

Answer 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)}}