Пагинатор Угловых Материалов

Я буду очень конкретен с моим вопросом, надеясь на столь же конкретный ответ.

я прочесал онлайн, и угловые документы по этому вопросу так же неопределенно для реальных случаев, как просить вас выбрать иглу из океана. Угловатые документы...

что я сделал до сих пор

  <mat-paginator (page)="pageEvent = $event" #paginator [length]="pageLength" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">
  </mat-paginator>

и это в моем компоненте

  pageLength: number;
  pageSize: 5;
  pageSizeOptions = [5, 10, 25, 100];

и затем я обновляю pageLength когда ответ конечной точки находится в like Итак:

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

выше рендеринг отображает пользовательский интерфейс для разбиения на страницы красиво в браузере

конечная точка потребляется через .get_requests(), для простоты, возвращает только 1000 фиксированных элементов.

теперь, вот как я представляю свой список на данный момент:

<mat-card *ngFor="let request of requests">
  <mat-card-title> {{ request.title }}</mat-card-title>
</mat-card>

Итак, с приведенной выше преамбулой, какие шаги мне осталось завершить, чтобы заставить разбиение на страницы работать с этим условием:

  • разбивка на страницы не сохраняется переход к конечной точке, чтобы вытащить каждый список элементов для каждого pageIndex.
  • после получения 1000 элементов при первом попадании из конечной точки, затем разбиение на страницы куски этой длины элементов вверх локально на стороне клиента. Больше никаких вызовов API.
6
angular

3 ответов

предположим, что вы загрузили данные ответа (массив) в запросах .

вероятно, можно создать метод, возвращающий набор данных из свойства requests с помощью метода splice.

таким образом, по результатам подписки API, он может быть обработан так в первый раз load:

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

можно использовать 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]"/>

вот работающий пример.

1

Я использовал GitHub API для этого примера, вам нужно дождаться события на пагинаторе, а затем выполнить HTTP-вызов, чтобы получить данные

угловой материал Paginator пример

0