Question

我目前正在学习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}}

Answer 1

您输入错误。必须使用(pageChange)="pageChange($event)"-您已经写了pageChange（page）-

响应结束。但我建议您订阅paramMap，因此，如果在导航器中更改了网址，则您的应用程序可以正常运行，例如在此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;
     })

我的分页号码不正确..但是我的页面工作正常

1 个答案: