我已经在laravel 5.5的一个角度5项目中安装了ngx-pagination。我的Angular项目正在使用Laravel的API。我在HTML，ts和服务文件中包含以下内容，如下所示：
// ts file
getPage(number){
this.productService.getURLpagengx(number).subscribe(data => {
this.products = data.products.data;
this.products_paging = data.products;
});
}
// service file
getURLpagengx(no): Observable<any>{
const url = '${this.url}/api/product?page='+no;
return this.http.get(url,{headers: new HttpHeaders({Authorization:'Bearer '+ this.token})});
} <div class="row">
<article class="col-md-4" *ngFor="let product of products | paginate: { itemsPerPage: 1, currentPage: p, totalItems: products_paging.total }">
<div class="mt-3 mb-3">
<div class="col-md-12">
<div class="font-weight-bold">{{product.product_name}}</div>
<p>{{product.description}}</p>
<p>{{product.rating}}</p>
<div class="pt-2 pb-2 border-top border-bottom">
<div class="mt-1">
</div>
</div>
</div>
</div>
</article>
</div>
我的分页效果很好，但分页中当前点击的按钮未激活/激活（例如蓝色）。
以下是从Laravel服务器端收到的jSON值：
{
"products": {
"current_page": 2,
"data": [
{
"id": 6,
"product_name": "Patrick Stoltenberg",
"description": "Dinah, tell me the truth: did you call him Tortoise--' 'Why did they live on?' said Alice, who felt ready to ask help of any one; so, when the White Rabbit. She was looking up into the air off all.",
"rating": 8,
"price": 13.5,
"uploaded_image": "",
"created_at": "2018-03-22 05:34:39",
"updated_at": "2018-03-22 05:34:39"
},
{
"id": 7,
"product_name": "Micheal Davis",
"description": "Has lasted the rest of my own. I'm a deal faster than it does.' 'Which would NOT be an advantage,' said Alice, 'a great girl like you,' (she might well say this), 'to go on crying in this way! Stop.",
"rating": 3,
"price": 27.6,
"uploaded_image": "",
"created_at": "2018-03-22 05:34:39",
"updated_at": "2018-03-22 05:34:39"
},
{
"id": 9,
"product_name": "Minnie Ebert",
"description": "Mouse had changed his mind, and was going to leave off being arches to do it?' 'In my youth,' Father William replied to his son, 'I feared it might injure the brain; But, now that I'm perfectly sure.",
"rating": 0,
"price": 40.9,
"uploaded_image": "",
"created_at": "2018-03-22 05:34:39",
"updated_at": "2018-03-22 05:34:39"
},
{
"id": 10,
"product_name": "Noble Jerde1",
"description": "He looked at the top of its right ear and left off quarrelling with the bones and the beak-- Pray how did you do either!' And the executioner ran wildly up and beg for its dinner, and all the party.",
"rating": 14,
"price": 25,
"uploaded_image": "",
"created_at": "2018-03-22 05:34:39",
"updated_at": "2018-04-04 07:23:13"
},
{
"id": 11,
"product_name": "Flo Connelly",
"description": "INSIDE, you might do something better with the lobsters to the other, and making faces at him as he came, 'Oh! the Duchess, who seemed to her feet in a natural way again. 'I wonder if I've kept her.",
"rating": 9,
"price": 40.8,
"uploaded_image": "",
"created_at": "2018-03-22 05:34:39",
"updated_at": "2018-03-22 05:34:39"
}
],
"first_page_url": "http://localhost:8000/api/product?page=1",
"from": 6,
"last_page": 3,
"last_page_url": "http://localhost:8000/api/product?page=3",
"next_page_url": "http://localhost:8000/api/product?page=3",
"path": "http://localhost:8000/api/product",
"per_page": 5,
"prev_page_url": "http://localhost:8000/api/product?page=1",
"to": 10,
"total": 15
}
}
答案 0 :(得分：1)
以下是我可以使用的示例代码
HTML
<div *ngIf="members?.length else noAll">
<ngx-loading [show]="paginationLoader"></ngx-loading>
<ul class="list-group">
<li class="list-group-item aud-padding p-l-xxs" *ngFor="let member of members | paginate: {id: 'server', itemsPerPage: pageLimitAndIndex.limit, currentPage: p, totalItems: totalMemberCount}">
<span>
<span class="checkbox m-r-sm" style="display:inline">
<mat-checkbox (change)="checkPaidUser($event, member.id)" name="paidMember[]" [(ngModel)] ="member.checked" class="member-checkbox m-m-t"></mat-checkbox>
</span>
</span>
<span class="p-l-xs">
<span class="m-t-sm">
<span>
<strong>{{(member.firstName+' '+member.lastName) | UcWords}}</strong>
</span>
<span> | {{member.email}} </span>
<span> | {{member.mobile}} </span>
</span>
</span>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 pull-right">
<br><br>
<pagination-controls *ngIf="totalMemberCount > pageLimitAndIndex.limit" (pageChange)="pageChanged($event)" id="server" class="my-pagination pull-right"></pagination-controls>
</div>
控制器代码： -
public pageLimitAndIndex = {limit: 20, index: 0};
p: Number = 1;
totalMemberCount: Number = 0;
在onInit中调用常用功能
ngOnInit() {
this.getPaidMemberDetail(this.pageLimitAndIndex);
}
常用功能
getPaidMemberDetail(params: Object = null) {
let data = null;
if (params != null) {
data = params;
}
this.totalMemberCount = 0;
this.appService.getJsonRequest(url, data).subscribe(result => {
this.members = result.members;
this.totalMemberCount = result.totalMemberCount;
this.p = data.index + 1;
}, err => {
console.log(err)
});
}
页面更改功能
pageChanged (page) {
this.pageLimitAndIndex.index = (page - 1);
this.paginationLoader = true;
this.getPaidMemberDetail(this.pageLimitAndIndex);
}
我的json回复
{
"status": 200,
"members": [{
"id": "5abcec6772c4312ca16e205b",
"firstName": "amd",
"lastName": "ww",
"email": "me.xs@rediffmail.com",
"deleted": false,
}]
"totalMemberCount": 25
}