如何解决分页问题？答案

【问题标题】：How to fix pagination problems?如何解决分页问题？
【发布时间】：2021-07-26 16:11:48
【问题描述】：

我正在编写学习 Angular 的项目。我的项目显示来自https://jsonplaceholder.typicode.com/ 的帖子。我正在编写自己的分页组件，在当前阶段，我遇到了分页问题。为什么分页不起作用？为什么单击分页中的任何数字时页面不改变？我的错误在哪里？如何解决此问题以使分页正常工作？

这里的所有项目：posts project

分页.component.ts：

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-pagination",
  templateUrl: "./pagination.component.html",
  styleUrls: ["./pagination.component.css"]
})
export class PaginationComponent implements OnInit {
  @Input() itemsPerPage: number = 0;
  @Input() totalItems: number = 0;
  @Input() page: any = 1;

  @Output() pageChanged = new EventEmitter();

  ngOnInit() {}

  pagesCount(): number {
    return Math.ceil(this.totalItems / this.itemsPerPage);
  }

  setPage(page: any) {
    this.pageChanged.emit(page);
  }

  prevPage() {
    this.setPage(this.page - 1);
  }

  nextPage() {
    this.setPage(this.page + 1);
  }

  getPages(): any {
    const pages = [];
    const currentPage = this.page;
    const count = this.pagesCount();

    for (let page = currentPage; page <= count; page++) {
      pages.push(page);
    }

    return pages;
  }

  onChangePage(event: any) {
    this.setPage(event);
    console.log("onChangePage", event);
  }
}

分页.component.html

<nav class="pagination">
  <button class="pagination-prev" (click)="prevPage()" [disabled]="page === 1">
    &laquo;
  </button>
  <ul class="pagination-list">
    <li *ngFor="let page of getPages()" (click)="setPage(page)">{{ page }}</li>
  </ul>
  <button class="pagination-next" (click)="nextPage()">&raquo;</button>
</nav>

app.component.ts

import { Component, OnInit } from "@angular/core";
import { Post, PostService } from "./post.service";
import { User, UserService } from "./user.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  page: any = 1;

  posts: Post[] = [];
  users: User[] = [];

  public totalItems: number = 100;
  public itemsPerPage: number = 10;

  error = "";

  constructor(
    private postService: PostService,
    private userService: UserService
  ) {}

  ngOnInit() {
    this.fetchPosts();
    this.fetchUsers();
  }

  onChangePage(event: any) {
    this.page = event;
    this.fetchPosts();

    console.log("onChangePage");
  }

  fetchPosts() {
    this.postService.fetchPosts(this.page, this.itemsPerPage).subscribe(
      (posts) => {
        this.posts = posts;
        // this.totalItems
      },
      (error) => {
        this.error = error.message;
      }
    );
  }

  fetchUsers() {
    this.userService.fetchUsers().subscribe((users) => {
      this.users = users;
    });
  }
}

app.component.html

<table>
  <thead>
    <tr>
      <th>user id</th>
      <th>Имя пользователя</th>
      <th>Заголовок</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of posts">
      <td>{{ item.userId }}</td>
      <td>
        <div *ngFor="let user of users">
          {{ item.userId === user.id ? user.username : '' }}
        </div>
      </td>
      <td>{{ item.title | titlecase }}</td>
    </tr>
  </tbody>
</table>

<app-pagination
  (changePage)="onChangePage($event)"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"
></app-pagination>

【问题讨论】：

标签： javascript angular pagination

【解决方案1】：

将changePage 更改为pageChanged。因为你的输出指令叫做pageChanged。

<app-pagination
  (pageChanged)="onChangePage($event)"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"></app-pagination>

【讨论】：

【解决方案2】：

您的事件发射器是pageChanged 而不是changePage。更改以下内容

<app-pagination
  (changePage)="onChangePage($event)"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"
></app-pagination>

到

<app-pagination
  (pageChanged)="onChangePage($event)"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"
></app-pagination>

分叉沙箱：-

【讨论】：