TransWikia.com

Paginacion en Angular con Angular Material

Stack Overflow en español Asked by danRivC on December 18, 2021

Hola a todos estoy utilizando paginator de angular material en mi aplicación web pero en realidad no funciona, el paginator aparece en la vista pero no me controla la paginación a pesar que le cambie los controles o la opcion de cuantos registros por pagina quiero mostrar, resulta que no realiza ningun cambio en la table
Este es mi componente

import { Component, OnInit, ViewChild } from '@angular/core';


import { UsuarioService } from 'src/app/core/usuario.service';

import { NgForm, FormBuilder, FormGroup } from '@angular/forms';
import { IUsuario } from 'src/app/models/usuario.model';
import { MatPaginator } from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-usuario',
  templateUrl: './usuario.component.html',
  styleUrls: ['./usuario.component.scss']
})
export class UsuarioComponent implements OnInit {

  constructor(private usuarioService: UsuarioService) {}
  titulo = "Usuarios";
  datos: Array<IUsuario>;
  dataSource = new MatTableDataSource<IUsuario>(this.datos);
  displayColumns: string[] = ['codigo', 'nombre', 'apellido', 'username', 'correo', 'actions'];
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.obtenerDatos();
    console.log(this.paginator);
    console.log(this.dataSource.paginator);
  }

  obtenerDatos(){
    this.usuarioService.obtenerTodosUsuarios("", true).subscribe(datos=>this.asignarUsuarios(datos));
  }

  buscar(form: NgForm){
    var username: string = form.value.username;
    var estado: boolean = form.value.estado;
    this.usuarioService.obtenerTodosUsuarios(username, estado).subscribe(datos=>this.asignarUsuarios(datos));
  }

  asignarUsuarios(datos){
    this.dataSource= datos.resultado
  }
}

Y esta parte de aqui es mi vista

 <div class="mt-3 col-lg-12 mat-elevation-z8">
        <div class="table ">
            <table mat-table [dataSource] ="dataSource"  class="col-lg-12 table-responsive-lg ">
                <ng-container matColumnDef="codigo">
                    <th mat-header-cell *matHeaderCellDef> ID </th>
                    <td mat-cell *matCellDef="let user"> {{user.codigo}} </td>
                  </ng-container>
                  <ng-container matColumnDef="nombre">
                    <th mat-header-cell *matHeaderCellDef> Nombre </th>
                    <td mat-cell *matCellDef="let user"> {{user.nombre}} </td>
                  </ng-container>
                  <ng-container matColumnDef="apellido">
                    <th mat-header-cell *matHeaderCellDef> Apellido </th>
                    <td mat-cell *matCellDef="let user"> {{user.apellido}} </td>
                  </ng-container>
                  <ng-container matColumnDef="username">
                    <th mat-header-cell *matHeaderCellDef> Usuario </th>
                    <td mat-cell *matCellDef="let user"> {{user.username}} </td>
                  </ng-container>
                  <ng-container matColumnDef="correo">
                    <th mat-header-cell *matHeaderCellDef> Correo </th>
                    <td mat-cell *matCellDef="let user"> {{user.correo}} </td>
                  </ng-container>
                  <ng-container matColumnDef="actions">
                    <th mat-header-cell *matHeaderCellDef> Editar </th>
                    <td mat-cell *matCellDef="let user">
                        <button class="btn btn-primary" type="button">Seleccionar</button>
                    </td>
                  </ng-container>
                  <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayColumns;"></tr>
            </table>
            <mat-paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons></mat-paginator>
        </div>
    </div>

No se que estoy haciendo mal, seguí las instrucciones de la documentación de angular material. La barra de paginación si aparece pero no funciona no me controla la paginación de mi table

3 Answers

 this.dataSource.paginator = this.paginator;

Debe ir después de terminar de cargar la tabla.

Answered by Dayana Sanchez on December 18, 2021

¿Has probado a cambiar el static a false?

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

y modificando también el método asignarUsuarios

asignarUsuarios(datos){
    this.dataSource = datos.resultado;
    this.dataSource.paginator = this.paginator;
}

Answered by Sergio Rubio on December 18, 2021

Podrías probar modificando el método asignarUsuarios para que quede así:

asignarUsuarios(datos){ this.dataSource.data = datos.resultado }

Answered by geovasanlo on December 18, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP