Issue Last Page display on pagination per items is 2 but it display as 3 why?

Question

I work on angular 13 i face issue on apply pagination numbers 1,2,3 etc.

my issue is last page Number must be 2 but it display as 3 why ?

I test my web api to check issue I found that last page number is 2 so why it display as 3 .

data json returned as below when run the api .

https://localhost:7235/api/items?pageNumber=0

   {
    "items": [
        {
            "id": 3,
            "itemNameER": "قلم",
            "itemNameEN": "pen",
            "description": "1"
        },
        {
            "id": 4,
            "itemNameER": "قلم",
            "itemNameEN": "pencil",
            "description": null
        },
        {
            "id": 5,
            "itemNameER": "قلم",
            "itemNameEN": "pen2",
            "description": null
        },
        {
            "id": 8,
            "itemNameER": "car",
            "itemNameEN": "car",
            "description": "1"
        },
        {
            "id": 9,
            "itemNameER": "mobile",
            "itemNameEN": "mobile",
            "description": "1"
        }
    ],
    "pager": {
        "numberOfPages": 2,
        "currentPage": 1,
        "totalRecords": 6
    }
}

as above number of pages is 2 so why it display 3

component.html

<table id="customers">
  <tr>
    <th>Id</th>
    <th>ItemNameAR</th>
    <th>ItemNameEN</th>
    <th>Description</th>
  </tr>
  <tr 
    *ngFor="
      let item of items
        | paginate
          : {
              itemsPerPage: pager?.numberOfPages,
              currentPage: pager?.currentPage,
              totalItems: pager?.totalRecords
            }
    "
  >
  <td>{{item.id}}</td>
  <td>{{item.itemNameAR}}</td>
  <td>{{item.itemNameEN}}</td>
  <td>{{item.description}}</td>
  </tr>
</table>

<pagination-controls
  previousLabel="Prev"
  nextLabel="Next"
  [responsive]="true"
  (pageChange)="onPageChanged($event)" 
></pagination-controls>

component.ts

export class ItemsComponent implements OnInit {
  items?: ItemsData[] | undefined;
  pager:any;
  currentItem = null;
  pageNumber:number=1;
  constructor(private erpservice:ErpServiceService) { }

  ngOnInit(): void {
    this.retrieveAllItems();
  }
  onPageChanged(pageNumber: number) {
    this.retrieveAllItems(pageNumber);
  }
  
  retrieveAllItems(pageNumber: number = 0): void {
    this.erpservice.getAll(pageNumber)
      .subscribe(
        data => {
        this.items=data.items;
        this.pager=data.pager;
        console.log(this.pager);
        },
        error => {
          console.log(error);
        });
  }

}

services.ts

getAll(pageNumber: number): Observable<DataWrapper> {
    let params = new HttpParams();

    if (pageNumber)
      params = params.append('pageNumber', pageNumber);

    let httpOptions = {
        params: params
    };
    return this.http.get<DataWrapper>(baseUrl,httpOptions);
  }

models

export interface ItemsData {
    id:number;
    itemNameER:string;
    itemNameAR:string;
    itemNameEN:string;
    description:string;
}
export interface DataWrapper {
    items: ItemsData[];
    pager:Pager;
}

export interface Pager {
    numberOfPages:number;
    currentPage:number;
    totalRecords:number;
}

my result i get

score -1 · Answer 1 · answered Jan 15 '23 at 19:40

i solved issue by assign itemsPerPage on component.ts

export class ItemsComponent implements OnInit {
  itemsPerPage:number=5;

then on component.html assgin it on paginate as below

<tr 
    *ngFor="
      let item of items
        | paginate
          : {
              itemsPerPage: itemsPerPage,
              currentPage: pager?.currentPage,
              totalItems: pager?.totalRecords
            }
    "
  >

my issue that i assign number of pages instead of item per page so my issue solved now .

Issue Last Page display on pagination per items is 2 but it display as 3 why?

1 Answers1