ngx-pagination icon indicating copy to clipboard operation
ngx-pagination copied to clipboard

InvalidPipeArgument Error in pagination-controls

Open OverchenkoDev opened this issue 3 years ago • 0 comments

Angular version: 12.0.4

ngx-pagination version: 5.1.1

Description of issue: I'm getting this error when pagination-controls component is initializing:

InvalidPipeArgument: 'Cannot read properties of undefined (reading '0')' for pipe 'DecimalPipe' at invalidPipeArgumentError (common.js:4128:1) at DecimalPipe.transform (common.js:4881:1) at pureFunction2Internal (core.js:25681:1) at Module.ɵɵpipeBind2 (core.js:25855:1) at PaginationControlsComponent_ul_2_li_4_ng_container_2_Template (ngx-pagination.js:88:92) at executeTemplate (core.js:9618:1) at refreshView (core.js:9484:1) at refreshEmbeddedViews (core.js:10609:1) at refreshView (core.js:9508:1) at refreshEmbeddedViews (core.js:10609:1)

My model for pagination and displaying items has those values: model: { currentPage: 1 entryCount: 20 items: (3) [{…}, {…}, {…}] pageWidth: 20 startEntry: 1 totalEntries: 3 totalPages: 1 }

Steps to reproduce: There is no any extra steps. I'm using pagination in simple way as suggested in docs.

Expected result: Pagination controls are showing with current page number. In my case I have one page which is current.

Actual result: Number of page doesn't show. Other eleements are showing and styling is working.

I'm importing NgxPaginationModule in my module.ts as provided in docs. That's how i use it:

<tr *ngFor="let item of model.items | paginate: {itemsPerPage: model.entryCount, currentPage: model.currentPage}"></tr>
           </tbody>           
        </table>        
    </div>
<div *ngIf="model.items.length > 0">
        <pagination-controls
            (pageChange)="changePage($event)"
            [previousLabel]='"&lt;"'
            [nextLabel]='"&gt;"'>
        </pagination-controls>
        <ng-select
            [ngModel]="model.entryCount"
            (ngModelChange)="changeEntriesCount($event)"
            [clearable]="false"
            [searchable]="false"
            [multiple]="false">
        <ng-option *ngFor="let size of pageSizes" [value]="size">{{size}}</ng-option>
        </ng-select>
    </div>

OverchenkoDev avatar Jul 22 '22 18:07 OverchenkoDev