pagination en angular4

med001
Javascript

Bonjour,
Je suivi cette tuto pour cree pagination en angular4 : http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google

je trouve cette resultat :

![https://imgur.com/ZkL7A6t]()

probléme que je trouve que j'ai 4 page en partie pagination mais quand il clique sur page 2 ou 3 ou4 en partie pagination il change rien c'est à dire même page reste et ne change pas

code service angular:

import { Injectable } from '@angular/core';
        import * as _ from 'underscore';

        @Injectable()
        export class PagerService {

          constructor() { }

          getPager(totalItems: number , currentPage: number = 1, pageSize: number =10) {
                // calculate total pages
                let totalPages = Math.ceil(totalItems / pageSize);
                let startPage: number, endPage: number;
                if (totalPages <= 10) {
                    // less than 10 total pages so show all
                    startPage = 1;
                    endPage = totalPages;
                } else {
                    // more than 10 total pages so calculate start and end pages
                    if (currentPage <= 6) {
                        startPage = 1;
                        endPage = 10;
                    } else if (currentPage + 4 >= totalPages) {
                        startPage = totalPages - 9;
                        endPage = totalPages;
                    } else {
                        startPage = currentPage - 5;
                        endPage = currentPage + 4;
                    }
                }

                // calculate start and end item indexes
                let startIndex = (currentPage - 1) * pageSize;
                let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

                // create an array of pages to ng-repeat in the pager control
                let pages = _.range(startPage, endPage + 1);

                // return object with all pager properties required by the view
                return {
                    totalItems: totalItems,
                    currentPage: currentPage,
                    pageSize: pageSize,
                    totalPages: totalPages,
                    startPage: startPage,
                    endPage: endPage,
                    startIndex: startIndex,
                    endIndex: endIndex,
                    pages: pages
                };
            }
        }

code component:

sz= ['Saab', 'Volvo', "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW", "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW"
        , "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW", "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW"
        , "BMW","Saab", "Volvo", "BMW","Saab", "Volvo", "BMW"];

          constructor( public pagerService:PagerService) { }

          ngOnInit() {
              this.setPage();
            });

          }

              setPage() {

                // get pager object from service
                this.pager = this.pagerService.getPager(this.sz.length);

                // get current page of items
                        this.pagedItems = this.sz.slice(this.pager.startIndex, this.pager.endIndex + 1);

            }

code component html:

        <div *ngFor="let ds of pagedItems">
                      {{ds}} <br>
                  </div>

                  <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
                      <li >
                          <a (click)="setPage(1)">First</a>
                      </li>
                      <li [ngClass]="{disabled:pager.currentPage === 1}">
                          <a (click)="setPage(pager.currentPage - 1)">Previous</a>
                      </li>
                      <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                          <a (click)="setPage(page)">{{page}}</a>
                      </li>
                      <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                          <a (click)="setPage(pager.currentPage + 1)">Next</a>
                      </li>
                      <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                          <a (click)="setPage(pager.totalPages)">Last</a>
                      </li>
                  </ul>

donc erreur est que j'obtient 4 page in partie pagination et 10 en partie affichage tableau ( tableau contient 40 element) .. logique est quand il clique sur autre pagination je trouve autre 10 elements mais cette action n'est pas effectué

s'il vous plait aide moi pour résolu cette erreur et merci d'avance

Aucune réponse