Issue with itemsPerPage

[panagulis72]

Hi, I'm using the following code for the html:

<div *ngFor="let templateEl of templates | paginate: { id: 'some_id',
  itemsPerPage: numRecords,
  currentPage: currentPage,
  totalItems: templatesCount }">{{templateEl.name}}</div>
  <pagination-controls id="some_id" (pageChange)="pageChanged($event)" maxSize="9" directionLinks="true" previousLabel="Previous"
    nextLabel="Next" screenReaderCurrentLabel="You're on page">
  </pagination-controls>

This is the Angular code:

 templates: TextTemplate[];
  result$: Subscription;
  templatesCount: number;
  fromRecord: number;
  numRecords: number;
  currentPage: number;

  constructor(private router: Router,
    private route: ActivatedRoute,
    private store: Store<fromTemplate.FeatureState>) {
    let templates$: Observable<TextTemplate[]> = this.store.select(fromApp.getTemplates);
    let templatesCount$: Observable<number> = this.store.select(fromApp.getTemplatesCount);
    let fromRecord$: Observable<number> = this.store.select(fromApp.getTemplatesFromRecord);
    let numRecords$: Observable<number> = this.store.select(fromApp.getTemplatesNumRecords);
    let page$: Observable<number> = this.store.select(fromApp.getTemplatesPage);
    const combinedSelectes$ = combineLatest(templates$, templatesCount$, fromRecord$, numRecords$, page$);

    this.result$ = combinedSelectes$.subscribe(
      ([templates, templatesCount, fromRecord, numRecords, currentPage]) => {
        this.templates = templates;
        this.templatesCount = templatesCount;
        this.fromRecord = fromRecord;
        this.numRecords = numRecords;
        this.currentPage = currentPage;
      });
  }

When I enter into the page, it works fine, it shows two element in the table and some buttons in the pagination. But, when I go to the second page, I call the Service to fetch from: 2 to: 4, and call the action:

       case TemplateActions.SET_TEMPLATES:
            return {
                ...state,
                templates: [...state.templates, ...action.payload]
            };

So now in the 'templates' I have 4 elements..and also in the html table, I see 4 elements, even if the 'itemsPerPage' is still 2. Why? What am I doing wrong?

[michaelbromley]

Hello,

I think this is happening because you are passing in the totalItems option, which tells the PaginatePipe that you are doing server-side paging. The pipe will then assume the length of the collection to be equal to the value of itemsPerPage.

You seem to be attempting a mixture of client-side and server side paging. On page 1 it is purely server-side - the server returns 2 templates and they are displayed correctly. On page 2 you are concatenating the templates array, and this is where the trouble arises.

One solution would be to replace the templates array with the new items, rather than concatenating. I don't know your business logic so you need to decide if this makes sense if your case.

[panagulis72]

At the beginning, the code was:

case TemplateActions.SET_TEMPLATES: return { ...state, templates: [...action.payload] // sovrascrivo i template }; but then I thought: why can't I concatenate the elements, so if I go back of one page I don't have to re-call the server? So it is not possible to handle this behaviour?

[panagulis72]

P.S. I retrieve the 'templatesCount' before the first fetching of elements, so I call the service just one time to retrieve the total