如何使用 ngFor 向 div 添加分页功能答案

【问题标题】：How to add pagination functionality to a div using ngFor如何使用 ngFor 向 div 添加分页功能
【发布时间】：2019-08-18 19:39:52
【问题描述】：

如何将分页功能添加到 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>

【问题讨论】：

你能告诉我你想要达到什么目标吗？
我能够从 json 文件中获取详细信息并使用 ngFor 显示它们。但是由于我有大量数据...我想向 div 添加一个分页元素...我正在使用角度材料分页组件。但我不知道如何将此功能添加到分页组件！
@LitsonThomas 已添加答案，请检查
@LitsonThomas 您可以在我的回答中查看工作示例。

标签： angular pagination angular-material angular7

【解决方案1】：

<div>
    <div ngFor="let item of items| slice: (page-1)*pagesize : page*  pagesize; index as i;">
        <div *ngIf="page==1" scope="row">{{i+1}}</div>
        <div scope="row" *ngIf="page>1">{{((page-1)*pagesize)+(i+1)}}</div>
        <div>{{item}}</div>
    </div>
</div>
<ngb-pagination [collectionSize]="totalItems" [(page)]="page" [(pageSize)]="pagesize" [rotate]="true">
</ngb-pagination>

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请编辑您的答案以添加解释并说明适用的限制和假设。

【解决方案2】：

我会使用 mat-paginator 的(page) 来获取选定的值，然后根据值过滤或拼接数组：

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

【讨论】：

属性“pageEvent”不存在
@PavloKozachuk 尝试定义pageEvent :any;component.ts

【解决方案3】：

您可以将mat-paginator 上的page 事件发射器用作(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 Demo showing Customized Paginatior, try changing paginator values

【讨论】：

【解决方案4】：

您应该使用延迟加载来加载数据。

为此，您首先应该获取 json 文件中记录的总长度并设置[length]="totalLength"。然后 mat-paginator 会根据 totalLength 自动为你设置页面。然后你应该加载前 10 个数据，即 0 到 10 并将其分配给 Colleges$。我说 10 是因为它是 [pageSize]。如果您的 pageSize 为 5，则加载前 5 个数据，依此类推。然后，当用户单击页码时，例如 2，您应该调用 api，它应该返回下一组数据，即 11 到 20 并将其分配给 Colleges$。数据将在视图中自动刷新。

最好创建一个 api，它会在您传递 2 个参数时为您获取数据 - 偏移量和限制，在您的情况下是页面大小。分页器中有各种方法（函数），当 pageSize 更改或用户单击页码时会触发它们

【讨论】：