javascript - 如何解决分页问题?
问题描述
我正在编写学习 Angular 的项目。我的项目显示来自https://jsonplaceholder.typicode.com/的帖子 。我正在编写自己的分页组件,在当前阶段,我遇到了分页问题。为什么分页不起作用?为什么单击分页中的任意数字时页面不改变?我的错误在哪里?如何解决此问题以使分页正常工作?
这里的所有项目:发布项目
分页.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);
}
}
pagination.component.html
<nav class="pagination">
<button class="pagination-prev" (click)="prevPage()" [disabled]="page === 1">
«
</button>
<ul class="pagination-list">
<li *ngFor="let page of getPages()" (click)="setPage(page)">{{ page }}</li>
</ul>
<button class="pagination-next" (click)="nextPage()">»</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>
解决方案
您的事件发射器 ispageChanged
和 not changePage
。更改以下
<app-pagination
(changePage)="onChangePage($event)"
[totalItems]="totalItems"
[itemsPerPage]="itemsPerPage"
></app-pagination>
至
<app-pagination
(pageChanged)="onChangePage($event)"
[totalItems]="totalItems"
[itemsPerPage]="itemsPerPage"
></app-pagination>
分叉沙箱:-
推荐阅读
- javascript - 加载后获取(p5)画布元素
- sqlite - 在 Discord 中提及
- python - 基于应由部分字符串匹配的公共列合并两个数据框
- python - 即使使用 pd.set_option(),Pandas 也无法打印未截断的数据帧
- elasticsearch - Elastic Search 中的空间处理
- scala - 如何在数据框中获取数组并将其转换为数据框
- python - 如何在列表中进行减法?
- vue.js - 无法在 vuex 中更新购物车商品数量
- javascript - Getting infinite loop on useEffect hook
- xml - 如何使用 xsl:for-each 获取输入