Angular ngFor show limit item and click to show next

Question

我正在使用 ngFor，但我希望我的 ngFor 每页只显示 3 个项目，然后当我单击下一步时，它将在另一页上显示接下来的 3 个项目，这意味着第 1 页显示 3 个项目（1 ,2,3) 第 2 页显示 3 个项目 (4,5,6) 等等，就像我们搜索 Google 并单击下一步或 'page 2' 以在第 2 页显示更多结果一样。我正在使用 slice 但这还不够。我坚持这个想法，所以我真的需要你的帮助，如果你们知道这个问题的一些关键词，请告诉我。非常感谢。

这是我的 *-component.html:

<section class="commentSection">
  <div class="comment" *ngFor="let item of reviewComments | slice:0:3">
      <div class="text">
        <div class="textContent" [innerHTML]="item.contentcomment"></div>
      </div>
      <div class="info">
        {{item.nameReviwer}} | {{item.date}}
      </div>
    </div>
  </div>
</section>

这是我的 *-component.ts":

getComments(bookId) { //get comment follow bookId
    this.bookService.getComment(bookId).subscribe(res => {
      console.log(res);
      this.reviewComments = res as ReviewComment[];
      console.log('List Comment: ', this.reviewComments);
    }, err => {
      console.log(err);
    });
}

这是我的*.service.ts

getComment(bookId: string): Observable<any> {
        const headers = new HttpHeaders({ 'Content-type': 'application/json' });
        return this.http.get(environment.apiBaseUrl + '/getcmtbook/' + bookId, { headers: headers }).catch(err => {
          return Observable.throw(err);
        });
}

Answer 1

您可以在 forloop 中使用 Mat-Paginator 组件：

HTML代码：

<div *ngFor="let obj of collection">
    <h3>{{obj}}</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 } 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 {

  @ViewChild(MatPaginator) paginator: MatPaginator;

  temp: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

  collection : any[] = []

  defaultRecords: any = 5;
  ngOnInit() {
    this.collection = this.temp.slice(0, this.defaultRecords);
  }
  onPaginateChange(data) {
    this.collection = this.temp.slice(0, data.pageSize);
  }
}

Updated_Stackblitz

Answer 2

解决您的问题的更简单有效的方法是使用 Angular Material Paginator

文档中提到的示例不言自明且易于理解。

此外，Ngx-Pagination 是一种快速简便的方法。 https://www.npmjs.com/package/ngx-pagination

Angular ngFor show limit item and click to show next

Angular ngFor show limit item and click to show next

angular

ngfor