1

estoy teniendo problemas con la paginacion de mi pagina, esta echa con angular material, pero deberia mostrarme solo 10 usuarios a la vez, de echo, me toma la lista completa de los usuarios y los muestra en la pagina , he intentado de todo, pero no me ha resultado nada.

este es mi archivo.ts:

 export class UserListComponent implements OnInit , AfterViewInit {
      //saveAction: any;
      displayedColumns: string[] = ['id', 'nombre', 'username', 'email', 'estado', 'fecha', 'acciones'];
      dataSource = new MatTableDataSource<any>();
      @ViewChild(MatPaginator, {static: false}) paginator!: MatPaginator;
      entity: string;
      title: string;
    ngOnInit() {
        this.loadUsers();
      }
      ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
      }
      loadUsers() {
        this.userService.getAll().subscribe({
          next: (response) => {
            const transformedData = response.map(org => ({
              id: org.id,
              nombre: org.name,
              fecha: org.creationDate,
              email: org.email,
              username: org.username,
              estado: this.enumeratorService.getStatusNameFromValue(org.status)
            }));
    
            this.dataSource = new MatTableDataSource(transformedData);
            this.dataSource.paginator = this.paginator; 
          },

y este es mi html:

  <mat-paginator 
        *ngIf="dataSource && dataSource.data?.length" 
        [length]="dataSource.data.length" 
        [pageSize]="10" 
        [pageSizeOptions]="[5, 10, 25, 100]"showFirstLastButtons>      
  </mat-paginator> 

Si me ayudan les estare muy agradecida de echo he tratado algunas de las respuestas de esta pagina y tampoco

3
  • ¿Cuál es la versión de angular que estás utilizando?
    – Synay
    Commented el 21 ago. a las 21:54
  • Hola que tal ! No te recomiendo inicializar tus variables del datasource en el mismo subscribe, ya que esta puede tardar, y puede ocurrir errores inesperados, te recomiendo ponerlo en el mismo oninit o fuera del subscribe
    – esphinx
    Commented el 22 ago. a las 13:54
  • Hola, estoy usando angular 17 Commented el 22 ago. a las 20:53

1 respuesta 1

0

Lo que podrías hacer es obtener una referencia al componente MatPaginator usando su referencia local userPaginator en el componente

@ViewChild('userPaginator', { read: MatPaginator }) userPaginator!: MatPaginator;

Modificando la llamada y dejándolo afuera del subscribe

this.dataSource = new MatTableDataSource(transformedData);
this.dataSource.paginator = this.userPaginator; 

Y definir el HTML de paginación de esta forma:

<mat-paginator 
            #userPaginator 
            [pageSize]="10" 
            [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons>
</mat-paginator>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.