Comment mettre en œuvre Bootstrap 4 Angulaire 2 ngb-pagination

J'ai un Angular2 application avec un component où j'ai une table.
Le tableau est généré via *ngFor directive.
Chaque ligne de la table est un objet avec des 9 champs qui est chargé à partir du backend lorsque le composant est initialisé.
Dans l'application que je suis en train d'utiliser ng-bootstrap angulaire module.
ng-boorstrap
En particulier, je suis en train de mettre en œuvre les pagination composant.

Quelqu'un pourrait expliquer comment mettre le code de sorte qu'il rendrait par exemple, seulement 10 lignes par page pls? Ou me donner une référence dans le cas de la mise en œuvre est effectué.

Ce que j'ai fait est la suivante:

  • de mettre la NgbModule référence à mon module où je suis en déclarant mon composant ainsi que la NgbPaginationConfig module (nécessaire pour l'aide personnalisé de la pagination)
  • mettre le ngb-pagination code de l'avis de mes component comme ce 
    <table class="table table-striped">
<thead>
    <tr>
        <th>Tracking #</th>
        <th>Brand</th>
        <th>Geography</th>
        <th>Country</th>
        <th>Contract Name</th>
        <th>Project Name</th>
        <th>Status</th>
        <th>$US BMC</th>
        <th>Release #</th>
        <th id="column-last"></th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let item of viewRows "> 
        <td>{{item.trackingNr}}</td>
        <td>{{item.brand}}</td>
        <td>{{item.geo}}</td>
        <td>{{item.country}}</td>
        <td>{{item.contractName}}</td>
        <td>{{item.projectName}}</td>
        <td>{{item.status}}</td>
        <td>{{item.usBmc}}</td>
        <td>{{item.releaseNr}}</td>
        <td id="column-last">
            <span class="awficon-edit" id="row-icons"></span>
            <span class="awficon-close-2" id="row-icons"></span>
        </td>
    </tr>
</tbody>

Comment mettre en œuvre Bootstrap 4 Angulaire 2 ngb-pagination

OriginalL'auteur Jozef Plachy | 2016-12-19

  1. 20

    c'est ma solution de travail.
    API pour ngb-pagination: https://ng-bootstrap.github.io/#/components/pagination

        ...
</table>
<ngb-pagination [collectionSize]="totalItems" [pageSize]="itemsPerPage" [(page)]="page" [maxSize]="7" [rotate]="true" (pageChange)="loadPage($event)"></ngb-pagination>

    Dans votre composant que vous avez besoin d'autres comme ça. N'oubliez pas de régler votre variable dans le constructeur:

      itemsPerPage: number;
  totalItems: any;
  page: any;
  previousPage: any;

  ...
  loadPage(page: number) {
    if (page !== this.previousPage) {
      this.previousPage = page;
      this.loadData();
    }
  }
  ...

  loadData() {
    this.dataService.query({
      page: this.page - 1,
      size: this.itemsPerPage,
    }).subscribe(
      (res: Response) => this.onSuccess(res.json(), res.headers),
      (res: Response) => this.onError(res.json())
      )
  }
    La documentation du composant manque des détails importants que vous avez couvert. Je vous remercie.
    comment en êtes-vous à la page précédente? Je vois le type de tout. mais je suis défaut lorsque vous assignez une valeur.
    Je reçois params dans routerResolver, par exemple: resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { const page = route.queryParams['page'] ? route.queryParams['page'] : '1'; const sort = route.queryParams['sort'] ? route.queryParams['sort'] : 'id,asc'; return { page: page }; }
    Je l'utilise pour empêcher le chargement de la page actuelle (si l'utilisateur charge 6 de la page et cliquez sur le 6, les données de rechargement.Donc, je vous abonner à des params dans constuctor. ` "cela.routeData = ce.activatedRoute.les données.abonnez-vous((data) => { cette.page = data['pagingParams'].page; ce.previousPage = data['pagingParams'].page; }); ``

    OriginalL'auteur Игорь Демянюк

  2. 0

    Ok. J'ai trouvé une super solution dans github.
    Check it out.
    https://github.com/michaelbromley/ng2-pagination

    OriginalL'auteur Jozef Plachy