时间戳

首页 > 解决方案 > 如何使用由http请求填充的数组进行分页| 角 6

angular - 如何使用由http请求填充的数组进行分页| 角 6

问题描述

我在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 个项目或更多）时加载所有数据。非常感谢您的帮助，我尝试遵循角度文档，但我不知道如何根据需要应用它。我已经导入了所需的模块。

标签： angularhttppaginationangular6page-numbering

解决方案

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

推荐阅读