我让ngx-pagination模块处理GET中的所有列表,但是我也希望该分页也可以在服务器端工作,但是我不确定如何进一步实现它。我正在查看有关ngx-pagination的文档,但有些困惑。这就是我所拥有的。
html
<body [ngClass]="[(this.isOpen && this.mobile) || (this.isOpen && this.tablet) ? 'hideContent' : 'showContent']">
<div class="loading">
<!-- <mat-spinner class="loader" *ngIf="isLoading"></mat-spinner> -->
<ngx-spinner id="loadingIcon" *ngIf="isLoading" type="cog" size="large" color="#3071a9">
<p class="loadingTitle">Loading...</p>
</ngx-spinner>
</div>
<div class="spacing"></div>
<div class="container">
<div class="row no-gutters"
*ngIf="!this.isOpen && this.mobile || this.isOpen && !this.mobile || !this.isOpen && !this.mobile">
<div class="class col-md-7"></div>
</div>
<!-- /|slice:0:show -->
<!--; let i = index-->
<div class="row"
*ngFor="let auction of posts | paginate: { itemsPerPage: 10, currentPage: p, totalItems: this.posts.count }">
<div class="col-md-12 col-centered">
<div class="listingCard" [@simpleFadeAnimation]="'in'">
<div class=container>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div id="title">{{auction.title}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body [ngClass]="[(this.isOpen && this.mobile) || (this.isOpen && this.tablet) ? 'hideContent' : 'showContent']">
<div class="loading">
<!-- <mat-spinner class="loader" *ngIf="isLoading"></mat-spinner> -->
<ngx-spinner id="loadingIcon" *ngIf="isLoading" type="cog" size="large" color="#3071a9">
<p class="loadingTitle">Loading...</p>
</ngx-spinner>
</div>
<div class="spacing"></div>
<div class="container">
<div class="row no-gutters"
*ngIf="!this.isOpen && this.mobile || this.isOpen && !this.mobile || !this.isOpen && !this.mobile">
<div class="class col-md-7"></div>
</div>
<!-- /|slice:0:show -->
<!--; let i = index-->
<div class="row"
*ngFor="let auction of posts | paginate: { itemsPerPage: 10, currentPage: p, totalItems: this.posts.count }">
<div class="col-md-12 col-centered">
<div class="listingCard" [@simpleFadeAnimation]="'in'">
<div class=container>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div id="title">{{listing.title}}</div>
</div>
</div>
</div>
=
</div>
</div>
</div>
</div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</body>
component
p: number = 1;
ngOnInit(){
this.submitListingService.getListings(this.postsPerPage, this.currentPage);
this.listingService
.getPostUpdateListener()
.pipe(takeUntil(this.destroy))
.subscribe((postData: { listing: Listing[]; postCount: number }) => {
this.isLoading = false;
this.totalPosts = postData.postCount;
this.posts = postData.listing;
this.filteredPosts = postData.listing;
});
}
角度服务
getListings(postsPerPage: number, currentPage: number) {
let listings = "Get Listings";
const params = new HttpParams().set("listings", listings);
const queryParams = `?pagesize=${postsPerPage}&page=${currentPage}`;
this.http
.get<{ message: string; posts: any; maxPosts: number }>(
"http://localhost:3000/api/listings" + queryParams,
{ params }
)
.pipe(
map(postData => {
return {
posts: postData.posts.map(post => {
return {
title: post.title,
id: post._id
};
}),
maxPosts: postData.maxPosts
};
})
)
.pipe(takeUntil(this.destroy))
.subscribe(transformedPostData => {
this.posts = transformedPostData.posts;
this.postsUpdated.next({
listing: [...this.posts],
postCount: transformedPostData.maxPosts
});
});
}
app.js
app.get("/api/listings", (req, res, next) => {
Post.find({ auctionEndDateTime: { $gte: Date.now() } })
.populate("creator", "username")
.then(documents => {
req.params.Id = mongoose.Types.ObjectId(req.params.Id);
res.status(200).json({
message: "Auction listings retrieved successfully!",
posts: documents
});
});
});
您将在服务器端需要两个值,第一个是页面,即要显示的页面号,第二个是限制,即要在页面上显示多少个结果。然后只需使用:
.skip(limit * (page - 1)).limit(limit)
[第一个运算符将跳过不想要的结果,例如:如果页面为2,限制为20,则在第一个操作中将跳过前20个结果,然后在第二个操作中,我们将结果限制为20个结果,因此您将获得21个文档到40,这是理想的结果。
这里是另一种方式。这可能更适合您的情况。
Post.find({ auctionEndDateTime: { $gte: Date.now() } })
.populate("creator", "username")
.then(documents => {
req.params.Id = mongoose.Types.ObjectId(req.params.Id);
let per_page = req.query.pagesize;
let page = req.query.page || 1;
let offset = (page - 1) * per_page;
res.status(200).json({
message: "Auction listings retrieved successfully!",
posts: documents.slice(offset).slice(0,
per_page)
});
});
您的服务文件,
getListings(postsPerPage: number, currentPage: number) {
// let listings = "Get Listings";
// const params = new HttpParams().set("listings", listings);
// const queryParams = `?pagesize=${postsPerPage}&page=${currentPage}`;
const queryParams = postsPerPage+"/"+currentPage; //change this .
this.http
.get<{ message: string; posts: any; maxPosts: number }>(
"http://localhost:3000/api/listings/" + queryParams
)
.pipe(
map(postData => {
return {
posts: postData.posts.map(post => {
return {
title: post.title,
id: post._id
};
}),
maxPosts: postData.maxPosts
};
})
)
.pipe(takeUntil(this.destroy))
.subscribe(transformedPostData => {
this.posts = transformedPostData.posts;
this.postsUpdated.next({
listing: [...this.posts],
postCount: transformedPostData.maxPosts
});
});
}
由于您正在发送参数,因此您需要按以下服务器代码中所述更改API的URL,
您的服务器代码将如下,
app.get("/api/listings/:postPerPage/:currentPage", (req, res, next) => {
let postPerPage = req.params.postPerPage;
let currentPage = req.params.currentPage;
Post.find({ auctionEndDateTime: { $gte: Date.now() } })
.populate("creator username")
.skip(postPerPage * currentPage)
.limit(postPerPage)
.then(documents => {
req.params.Id = mongoose.Types.ObjectId(req.params.Id);
res.status(200).json({
message: "Auction listings retrieved successfully!",
posts: documents
});
});
});
从以上代码中,您将获得等于postPerPage的帖子。希望这是您想要的。谢谢