Step 13: Pagination doesn’t work

[fiee]

Except some template changes, my code is the same as in your download. Clicking on pagination links does nothing. There are no errors on JS console, but meteor says:

=> Started proxy.                             
=> Started MongoDB.    
                   
client/imports/app/parties/parties-list.component.ts (57, 51): Argument of type '() => string' is not assignable to parameter of type 'string'.
client/imports/app/parties/parties-list.component.ts (78, 41): Argument of type '{ id: () => string; itemsPerPage: number; currentPage: number; totalItems: number; }' is not assignable to parameter of type 'PaginationInstance'.
  Types of property 'id' are incompatible.
    Type '() => string' is not assignable to type 'string'.
client/imports/app/parties/parties-list.component.ts (92, 50): Argument of type '() => string' is not assignable to parameter of type 'string'.

=> Started your app.

The lines are:
57: this.paginationService.setCurrentPage(this.paginationService.defaultId, curPage as number);
78: this.paginationService.register({ id: this.paginationService.defaultId, itemsPerPage: 10, currentPage: 1, totalItems: this.partiesSize });
92: this.paginationService.setTotalItems(this.paginationService.defaultId, this.partiesSize);

What can I do?

[jessejamesrich]

I have exactly the same problem currently:

client/imports/app/parties/parties-list.component.ts (57, 49): Argument of type '() => string' is not assignable to parameter of type 'string'.
client/imports/app/parties/parties-list.component.ts (72, 37): Argument of type '{ id: () => string; itemsPerPage: number; currentPage: number; totalItems: number; }' is not assignable to parameter of type 'PaginationInstance'.
  Types of property 'id' are incompatible.
    Type '() => string' is not assignable to type 'string'.
client/imports/app/parties/parties-list.component.ts (86, 44): Argument of type '() => string' is not assignable to parameter of type 'string'.
client/imports/app/shared/rsvp.pipe.ts (18, 17): Property 'rsvps' does not exist on type 'Party'.
client/imports/app/shared/rsvp.pipe.ts (18, 31): Property 'rsvps' does not exist on type 'Party'.
both/methods/parties.methods.ts (68, 37): Property 'rsvps' does not exist on type 'Party'.
both/methods/parties.methods.ts (68, 51): Property 'rsvps' does not exist on type 'Party'.

I think I'm a few steps ahead, and possibly have some issues with the later errors, but for the most part the same thing.

Is it, by chance, the accounts module is incorrect?

EDIT

Looks like the issue is discussed here, but I still can't solve it.

michaelbromley/ngx-pagination#29
Urigo/angular2-meteor#257

[fiee]

It helps replacing the pagination configuration object with a PaginationInstance like so:

pgConfig: PaginationInstance = {
    id: 'someId',
    itemsPerPage: 10,
    currentPage: 1 //,
    //totalItems: 0
};

and then replace this.paginationService.defaultId with this.pgConfig.id (or just the string itself, of course).

Add the id also to your <pagination-controls />.

That takes me so far that the pagination controls are properly displayed and react to my clicks to display the correct page, but only for an instance, until it is replaced by the first page again.
If there is a temporary problem connecting to the server, it works. Where must I hook in?

[jessejamesrich]

How are you adding the id to the property?

[jessejamesrich]

My apologies, I meant "how are you adding the id to the element?" Can you give an example?

[fiee]

Do you mean just this:

<pagination-controls id="someId" (pageChange)="onPageChanged($event)"></pagination-controls>

or the PaginationInstance?

See https://gist.github.com/fiee/84ff01a5a60a1d80aca15c650dff17ec

[mrsonne]

I changed

this.paginationService.defaultId

to

this.paginationService.defaultId()

in the tutorial (client/imports/app/parties/parties-list.component.ts) and now it's working.

[thoni56]

@mrsonne, I also discovered this problem using a more typestrict IDE, and filed #215 for this fix.