0

estoy intentando hacer un matpaginator para multiples tablas traidas de una misma funcion pero el matpaginator aparece como 'undefined'

vista

De esta manera tengo mi funcion en el component.ts que trae los datos desde un servicio

Groups(){
this.dataSource = new MatTableDataSource();
this.apiSvc.Cards().subscribe((rsp: any) => { 
    this.groups = rsp;
    
});

this.apiSvc.Cards().pipe(
    switchMap((rsp:any[])=>{
        return forkJoin(
            rsp.map(x=>this.apiSvc.Groups(x.id))
            )
        })
).subscribe((res:any[])=>{

    this.dataSource.data = res;
    this.dataSource.paginator = this.paginator;
    
 });

}

de esta manera declare mi paginator @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator = Object.create(null);

y asi tengo mi template

<div id="GroupFor">
 <div fxLayout="row wrap" *ngFor = "let group of groups | searchGroupFilter:searchText">
  //group data
 </div>
</div>
<div fxFlex.gt-lg="82" fxFlex.gt-md="81" fxFlex.gt-xs="100" fxFlex="100" id="tableDiv">
 <mat-card class="mat-card-employee">
  <mat-card-content>
   <div class="table-responsive">
    <table mat-table [dataSource]="dataSource.filteredData | filterGroups:group.id" class="table employee-list no-wrap">
      //rows and columns
    </table>
    <mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> 
   </div>
   </mat-card-content>
  </mat-card>
 </div>

Creo que no trae el mat paginator porque hay multiples tablas y al asignarlo en el metodo subscribe() es indefinido.

Si alguien puede ayudarme lo agaradeceria

1 respuesta 1

0

Para poder acceder a todas las instancias de un componente o elementos del template puedes usar el decorador @ViewChildren, con el cual obtendrás la lista de instancias de dicho elemento.

Esto se discutió aquí:

[Multiple Mat-Paginator in a single page] (https://stackoverflow.com/questions/50518541/multiple-mat-paginator-in-a-single-page-angular-5-data-table)

Adicionalmente, puedes revisar la documentación:

ViewChildren

1
  • Hola, lo revisare, muchas gracias por tu ayuda!!
    – Alexis
    Commented el 27 jul. 2021 a las 14:16

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.