我的分页号码错误....但我的页面工作正常答案

【问题标题】：I have wrong number on pagination .... but my page work OK我的分页号码错误....但我的页面工作正常
【发布时间】：2019-05-07 02:58:47
【问题描述】：

我目前正在学习 Angular。我确实在商业上用这种语言创建了应用程序。我做错了什么，因为我的分页数不好。不幸的是，我不知道我在哪里犯了错误。我应该在我的代码中改进什么？请帮忙。

我的代码：

import { Component, OnInit } from '@angular/core';
import { CompanyService } from './../services/company.service';
import { NgbPaginationConfig } from '@ng-bootstrap/ng-bootstrap';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { IPage } from './../services/page';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';
import { ActivatedRoute } from "@angular/router";

@Component({
    selector: 'app-company-profile',
    templateUrl: './company-profile.component.html',
    styleUrls: ['./company-profile.component.css']
})
export class CompanyProfileComponent implements OnInit {
    public company = [];
    public errorMsg;

    page;
    numberOfPage;
    numberOfPageTMP;
    pageSize;
    private _url;

    constructor(private _companyService: CompanyService, config: NgbPaginationConfig, private http: HttpClient, private router: Router, private route: ActivatedRoute) {
        this.page = Number(this.route.snapshot.paramMap.get("page"))
        this.router.routeReuseStrategy.shouldReuseRoute = () => false;

    }

    ngOnInit() {

        this.page = Number(this.route.snapshot.paramMap.get("page"))

        this.getCompany2(this.page)
            .subscribe(data => {

                this.company = [data]
                this.numberOfPage = this.company[0].numberOfPage;
                this.pageSize = this.company[0].pageSize;

            },
            error => this.errorMsg = error);

    }



    pageChange(page) {

        this.router.navigate(['companies/' + page]);
           }

    url2(page) {
        //api/company?page=1&language=pl"
        return "http://localhost:4200/api/company?page=" + page + "&language=pl";
    }

    getCompany2(page): Observable<IPage> {
        return this.http.get<IPage>(this.url2(page));
    }
    errorHandler(error: HttpErrorResponse) {
        return Observable.throw(error.message || "Server Error");
    }

}

和html代码：

 <ngb-pagination [collectionSize]="numberOfPage*10" [(page)]="page" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="pageChange(page)"></ngb-pagination>
      <pre>Current page: {{page}}</pre>
      dsdsddsds: {{collectionSize}}
      dsdsddsds: {{company[0].numberOfPage}}
      sru: {{numberOfPage}}

【问题讨论】：

标签： angular pagination

【解决方案1】：

你有一个类型错误。必须使用(pageChange)="pageChange($event)" - 你写过pageChange(page)-

响应结束。但我建议您订阅 paramMap，因此如果更改导航器中的 url，您的应用程序可以工作，请参阅例如在这个stackblitz

有人喜欢

this.activateRouter.paramMap.pipe(
       //well we don't want the page
       switchMap((params: ParamMap)=>{
          this.page=+params.get('page');
          //we return the call of the service
          return this.dataService.getData(this.page)
     })).subscribe(data=>{
             this.company = [data]
             this.numberOfPage = this.company[0].numberOfPage;
             this.pageSize = this.company[0].pageSize;
     })

【讨论】：