我想在Angular 5中创建一个自定义分页，由Laravel 5作为后端支持。我的意图是，如果有7页，那么分页看起来像：1 | 2 | 3 | 4 | 5;如果用户点击3，分页将看起来像3 | 4 | 5 | 6 |为实现这一目标，我在product.component.ts中创建了一个自定义分页，如下所示：
createRange(number, current_page){
console.log('current page='+current_page);
var items: number[] = [];
for(var i = current_page; i <= current_page + 2; i++){
items.push(i);
}
//console.log(JSON.stringify(items));
return items;
}
directPage(url, pathNo) { //console.log(url);
var link_path = url+"?page="+pathNo;
this.productService.getURLpage(link_path).subscribe(data => {
this.products = data.products.data;
this.products_paging = data.products;
});
}
在product.component.html中，我有以下代码：
<ng-template ngFor let-item [ngForOf]="createRange(5, products_paging.current_page)" let-currentElementIndex="index+1">
<button (click)="directPage(products_paging.path, currentElementIndex)">{{currentElementIndex}}</button>
</ng-template>
分页是基于我选择的分页中的按钮来工作/更改数据但是，分页数字不会像保持按钮那样改变自己。 2 | 3 | 4 | 5.我的问题是 - 如果我从那里选择任何数字，我怎么能更改分页按钮（数字）？如果这一点清除，请告诉我，否则我会更新我的问题。
下面是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代码：
<ul class="meal-list">
<li *ngFor="let meal of asyncMeals | async | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }">
{{ meal }}
</li>
</ul>
<div class="has-text-centered">
<div class="spinner" [ngClass]="{ 'hidden': !loading }"></div>
<pagination-controls (pageChange)="getPage($event)" id="server">
</pagination-controls>
打字稿代码：
import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/delay';
interface IServerResponse {
items: string[];
total: number;
}
@Component({
selector: 'server-example',
templateUrl: './server-example.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ServerExampleComponent {
@Input('data') meals: string[] = [];
asyncMeals: Observable<string[]>;
p: number = 1;
total: number;
loading: boolean;
ngOnInit() {
this.getPage(1);
}
getPage(page: number) {
this.loading = true;
this.asyncMeals = serverCall(this.meals, page)
.do(res => {
this.total = res.total;
this.p = page;
this.loading = false;
})
.map(res => res.items);
}
}
/**
* Simulate an async HTTP call with a delayed observable.
*/
function serverCall(meals: string[], page: number): Observable<IServerResponse> {
const perPage = 10;
const start = (page - 1) * perPage;
const end = start + perPage;
return Observable
.of({
items: meals.slice(start, end),
total: 100
}).delay(1000);
}