如何对http request填充的数组使用分页| Angular 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个或更多条目。非常感谢你的帮助，我试着遵循angular文档，但我不知道如何应用它来满足我的需求。并且我已经导入了所需的模块。

Answer 1

后端分页

修改现有的服务函数或创建一个新的服务函数，该服务函数接受后端和parameters.

• Use api/lubricants?page=2&per_page=50

• Modify发送请求，如下所示：

1. page data/page HttpParams以根据这些参数提供结果。

这种方法的灵感来自于github v3 api。有关github v3中分页解决方案的更多信息，请访问here。

Answer 2

如果你想防止一次加载超过100个项目，那么这是需要从后端处理的事情。这不是你应该从angular管理的东西。你的服务不应该担心它得到了多少对象。如果您不介意一次加载许多对象，并且在显示它们时只需要分页，那么这可能是一个简单的修复https://www.npmjs.com/package/ngx-pagination