как использовать нумерацию страниц с массивом, заполненным запросом http |Угловой 6

Question

У меня есть массив элементов, заполненных на ngOnInit.ниже мое мнение

<mat-grid-list cols="4" rowHeight="150px">
  <mat-grid-tile *ngFor="let item of lubricants; let i = index">
    <img src="../assets/icons/washingIcons/upArrow.png">
  </mat-grid-tile>
</mat-grid-list>

, и это мой файл TS:

import { Component, OnInit } from '@angular/core';
import { SellLubricantsService} from  './sell-lubricants.service'

@Component({
  selector: 'app-sell-lubricants',
  templateUrl: './sell-lubricants.component.html',
  styleUrls: ['./sell-lubricants.component.scss']
})
export class SellLubricantsComponent implements OnInit {

  lubricants:any;
  constructor(private sellLubServ:SellLubricantsService) { }

  ngOnInit() {
    this.getAllLubricants();
  }

  getAllLubricants(){
    this.sellLubServ.getAllLubricants().subscribe(
    Response=>{this.lubricants=Response;},
    error=>{alert("error")}
    );
  }
}

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

Answer 1

, если вы хотите предотвратить загрузку более 100 элементов одновременно, это то, что должно быть обработано с бэкэнда.это не то, что вы должны управлять с угловой.Ваш сервис не должен беспокоиться о том, сколько объектов он получает.если вы не возражаете загрузить сразу несколько объектов и просто нуждаетесь в разбиении на страницы при их отображении, это может быть легко исправить https://www.npmjs.com/package/ngx-pagination

Answer 2

Пагинация на стороне сервера

1. Изменить существующую или создать новую сервисную функцию, которая принимает параметры page и data/page.
2. Использование HttpParams для отправки запроса следующим образом: api/lubricants?page=2&per_page=50
3. Измените внутреннюю часть для предоставления результатов на основе этих параметров.

Этот подход основан на github v3 api .Более подробная информация о решении для нумерации страниц в github v3 здесь .