Как добавить функциональность нумерации страниц в div, используя ngFor - PullRequest
Новая
       25

Как добавить функциональность нумерации страниц в div, используя ngFor

0 голосов
/ 28 марта 2019

Как добавить функцию разбиения на страницы в div.

app.component.html 

<div>

 <div *ngFor="let clg of colleges$">
  <h3>{{clg.name}}</h3>
 </div>

 <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 
 100]"></mat-paginator>

</div>

Ответы [ 3 ]

0 голосов
/ 28 марта 2019

Я бы использовал (page) mat-paginator, чтобы получить выбранные значения, а затем отфильтровать или соединить массив на основе значения:

HTML-код: 

<div *ngFor="let clg of filteredArray">
    <h3>{{clg.name}}</h3>
</div>
<mat-paginator [length]="100" [pageSize]="defaultRecords" [pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; onPaginateChange($event)">
</mat-paginator>

Код TS: 

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
/**
 * @title Paginator
 */
@Component({
  selector: 'paginator-overview-example',
  templateUrl: 'paginator-overview-example.html',
  styleUrls: ['paginator-overview-example.css'],
})
export class PaginatorOverviewExample implements OnInit {

  colleges: any[] = [{ name: "1" }, { name: "2" }, { name: "3" }, { name: "4" }, { name: "5" }, { name: "6" }, { name: "7" }, { name: "8" }, { name: "9" }, { name: "10" }, { name: "11" }, { name: "12" }, { name: "13" }];

  filteredArray: any[] = []

  defaultRecords: any = 5;

  ngOnInit() {
    this.filteredArray = this.colleges.slice(0, this.defaultRecords);
  }

  onPaginateChange(data) {
    this.filteredArray = this.colleges.slice(0, data.pageSize);
  }
}

Working_Demo

0 голосов
/ 28 марта 2019

Вы можете использовать page источник событий на mat-paginator как (page)="onPageChange($event)"

<div *ngFor="let item of currentItemsToShow, let i=index;">Hello {{item.name}}</div>    

onPageChange($event) {
        this.currentItemsToShow =  this.items.slice($event.pageIndex*$event.pageSize,
        $event.pageIndex*$event.pageSize + $event.pageSize);
      }

Демонстрация Stackblitz, показывающая настроенный Paginatior, попробуйте изменить значения paginator

0 голосов
/ 28 марта 2019

Вы должны загрузить данные, используя ленивую загрузку.

Для этого вам сначала нужно получить общую длину записей в файле json и установить [length]="totalLength".Тогда mat-paginator автоматически установит для вас страницы на основе totalLength.Затем вы должны загрузить первые 10 данных, то есть от 0 до 10, и назначить их в колледжи $.Я сказал 10, потому что это [pageSize].Если ваш размер страницы был 5, загрузите первые 5 данных и так далее.Затем, когда пользователь нажимает на номер страницы, например, 2, вы должны позвонить вам api, и он должен вернуть следующий набор данных, т.е. с 11 по 20, и назначить его колледжам $.Данные будут автоматически обновляться в представлении.

Лучше создать API, который будет извлекать данные для вас, когда вы передадите 2 параметра - смещение и ограничение, которое является размером страницы в вашем случае.В paginator есть различные методы (функции), которые срабатывают при изменении pageSize или нажатии пользователем на номер страницы

...