Visualizzazione dei risultati da 1 a 5 su 5

Discussione: Angular 6 - Pagination

  1. #1

    Angular 6 - Pagination

    Ciao a tutti,
    Mi sto imbattendo nel mondo di Angular e in particolar modo sto cercando di fare una paginazione usando ng-bootstrap.

    Vi posto i componenti che ho creato

    messaggi.component.ts
    codice:
    
    
    codice:
    import { Component, OnInit } from '@angular/core';
    import { MessaggiService } from '../services/messaggi.service';
    import { Messaggi } from '../interfaces/messaggi';
    
    @Component({
      selector: 'app-messaggi',
      templateUrl: './messaggi.component.html',
      styleUrls: ['./messaggi.component.css']
    })
    export class MessaggiComponent implements OnInit {
    
      numberPage:number;
    
      listaMessaggi : Messaggi[] = [];
    
      constructor(private serviceMessaggi: MessaggiService) {
        serviceMessaggi.listaMessaggiOutput.subscribe(
          (val:Messaggi[])=>{
            this.listaMessaggi.concat(val);
          }
        );
      }
    
      ngOnInit() {
        this.numberPage = 1;
      }
    
      async leggiMessaggi(){
    
        let username = "";
        const data = JSON.parse(localStorage.getItem('user'));
        if( data ){
          username = data['username'];
        }
    
        this.listaMessaggi = [];
        this.listaMessaggi = await this.serviceMessaggi.getMessaggi(username, "10", "0");
    
        console.log("Leggi Messaggi result: ");
        console.log("Risultato Messaggi" +JSON.stringify(this.listaMessaggi));
      }
    
    }
    
    



    messaggi.component.html
    codice:
    
    
    codice:
    <div class="leggiMessaggi" >
    
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">Mittente</th>
            <th scope="col">Oggetto</th>
          </tr>
        </thead>
    
        <tbody *ngFor="let messaggio of listaMessaggi">
          <tr>
            <td>{{messaggio.mittente}}</td>
            <td>{{messaggio.oggetto}}</td>
          </tr>
        </tbody>
      </table>
    
      <app-pagination [number-page]="numberPage"></app-pagination>
    
    </div>
    



    pagination.component.html
    codice:
    
    
    codice:
    <ngb-pagination (pageChange)="pageChanged($event)" [pageSize]="10" [collectionSize]="20" [(page)]="numberPage" [boundaryLinks]="true"></ngb-pagination>
    
    <hr>
    
    <pre>Pagina Corrente: {{numberPage}}</pre>
    
    <hr>
    


    pagination.component.ts
    codice:
    
    
    codice:
    import { Component, OnInit, Input , Output, EventEmitter} from '@angular/core';
    import { MessaggiService } from '../services/messaggi.service';
    
    @Component({
      selector: 'app-pagination',
      templateUrl: './pagination.component.html',
      styleUrls: ['./pagination.component.css']
    })
    export class PaginationComponent implements OnInit {
    
      @Input("number-page") numberPage: number;
    
    
      constructor(private service: MessaggiService) {
      }
    
       pageChanged(page) { 
    
       }
    
      ngOnInit() {
      }
    
    }
    



    Poi c'ho un messaggi.service.ts che contiene appunto la chiamata al servizio. Adesso vorrei fare in modo che al click sul numero della pagina, il metodo pageChanged di pagination.component.ts cambi i risultati in messaggi.component.
    Come dovrei fare?Sposto tutta la logica di messaggi.component in pagination.component?O ci sta qualche altro modo?

    Grazie mille e spero di esser stato chiaro.

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    254
    Domanda: come mai hai fatto un componente per il paginatore? E' lui stesso già un componente.

    Venendo al tuo problema devi occupartene tu, nell' ngFor di fare lo slice della lista in base al numero di pagina e al numero di elementi da mostrare nella lista. Puoi vedere un esempio direttamente nel componente ngb-pagination sul sito ufficiale, sotto il tab Examples

  3. #3
    Ciao Fix,
    Grazie mille per la risposta . Avevo fatto un componente per capire un pò il passaggio di dati tra un componente e l'altro. Alla fine poi ho semplicemente aggiungo al mio messaggi.component il tag "<ngb-pagination> in modo tale da non avere problemi . Grazie ancora

  4. #4
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,181
    gray quando postil il codice sul forum usa il tag code piuttosto che la formattazione del tuo ide. non si vede nulla. come per l'altra discussione chiudo un occhio che sei nuovo....
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  5. #5
    Scusami tanto ciro,
    La prossima volta farò più attenzione . Grazie ancora

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.