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
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP