Angular 带Laravel 5的角度5自定义分页

我想在Angular 5中创建一个自定义分页，它由Laravel 5作为后端支持。我的意图是，如果有7页，那么分页将如下所示：1 | 2 | 3 | 4 | 5；如果用户单击3，分页将类似于3 | 4 | 5 | 6 | 7等。为此，我在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;

        });
  }

---

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);
    }

{{膳食}

类型脚本代码：

<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);
    }

从“@angular/core”导入{ChangeDetectionStrategy，Component，Input}；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/of”；
导入'rxjs/add/operator/do'；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/delay”；
接口响应{
项目：字符串[]；
总数：个；
}
@组成部分({
选择器：“服务器示例”，
templateUrl:'./服务器示例.component.html'，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类ServerExampleComponent{
@输入（'data'）：字符串[]=[]；
非对称性：可观察；
p：数字=1；
总数：个；
加载：布尔；
恩戈尼尼特（）{
这是第（1）页；
}
getPage（第页：编号）{
这是。加载=真；
this.asyncFines=serverCall（this.fines，第页）
.do（res=>{
this.total=res.total；
p=page；
这一点：加载=错误；
})
.map（res=>res.items）；
}
}
/**
*使用延迟的可观察对象模拟异步HTTP调用。
*/
函数serverCall（字符串[]，页码）：可观察{
每页常数=10；
常数开始=（第1页）*每页；
const end=开始+每页；
可观测回波
.的({
项目：膳食。切片（开始，结束），
总数：100
}).延迟（1000）；
}

你能在stackblitz中分享你的代码吗？@dgpoo-stackblitz很费时，因为我在这里什么都不知道。我应该用Laravel提供的jSON值更新我的问题吗？是的，请分享it@dgpoo-问题已更新。是否检查createRange（）函数是否正在调用？