Индекс нумерации страниц в угловых 5 - PullRequest
Новая
       19

Индекс нумерации страниц в угловых 5

0 голосов
/ 27 июня 2018

Я работаю с проектом, использующим WordPress API в Angular 5. И я использовал сетку материалов, а также фильтрацию и нумерацию страниц. Я столкнулся с проблемой индексации, как будто у меня есть 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>

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

1 Ответ

0 голосов
/ 27 июня 2018

Я должен сказать, что у вас есть что-то вроде 

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

...