1

Tengo una pantalla donde tengo tres tablas, cada una de ellas se llena con un servicio diferente, agregué el mat paginator a cada una de ellas pero el que funciona solo es el primero, de las otras dos tablas no hacen nada el paginador

html

    <div class="container">
  <div class="scrollme">
    <form>
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="idControl">
          <th mat-header-cell *matHeaderCellDef>ID.</th>
          <td mat-cell *matCellDef="let element">{{ element.idControl }}</td>
        </ng-container>

        <ng-container matColumnDef="cveEstado">
          <th mat-header-cell *matHeaderCellDef>ESTADO</th>
          <td mat-cell *matCellDef="let element" class="select-css" [ngClass]="{'text-red': element.cveEstado=='ERR',
        'text-green': element.cveEstado=='INP', 'text-orange': element.cveEstado=='PEN'}">
            <mat-select [(value)]="element.cveEstado" (selectionChange)="cambiarEstado($event.value, element)"
              [disabled]="!element.editar">

              <mat-option *ngFor="let estatus of estadoModel" [value]="estatus.cveEstado"
                [disabled]="deshabilitarOpcion(element.cveEstado).includes(estatus.descripcion)">
                {{ estatus.descripcion }}
              </mat-option>
            </mat-select>
          </td>
        </ng-container>

        <ng-container matColumnDef="comentario">
          <th mat-header-cell *matHeaderCellDef>COMENTARIO</th>
          <td mat-cell *matCellDef="let element">
            <mat-form-field>
              <input matInput [value]="element.comentario" (keyup)="changeValue($event.target, element)"
                [disabled]="!element.editar" />
            </mat-form-field>
            <br>
            <span class="error" *ngIf="element.limiteExcedido">El tamaño máximo es de 15 caracteres</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="horaInicio">
          <th mat-header-cell *matHeaderCellDef>HORA</th>
          <td mat-cell *matCellDef="let element">
            <mat-form-field>
              <input matInput [value]="element.horaInicio" (keyup)="changeValueHora($event.target, element)"
                [disabled]="!element.editar" />
            </mat-form-field>
          </td>
        </ng-container>

        <ng-container matColumnDef="fechaRegistro">
          <th mat-header-cell *matHeaderCellDef>FECHAREGISTRO</th>
          <td mat-cell *matCellDef="let element">
            <mat-form-field appearance="fill" *ngIf="element.fechaRegistro">
              <input matInput [matDatepicker]="picker" [value]="element.fechaRegistro"
                (dateChange)="onDateChange($event.value, element)" [disabled]="!element.editar" />
              <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
          </td>
        </ng-container>

        <ng-container matColumnDef="esValido">
          <th mat-header-cell *matHeaderCellDef> ES VALIDO </th>
          <td mat-cell *matCellDef="let element">
            <mat-form-field>
              <mat-select [(value)]="element.esValido">
                <mat-option *ngFor="let valid of esValidoArr" [value]="valid.valor">
                  {{ valid.label}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </td>
        </ng-container>

        <ng-container matColumnDef="botonSave">
          <th mat-header-cell *matHeaderCellDef>GUARDAR</th>
          <td mat-cell *matCellDef="let element; let i = index">
            <button mat-button (click)="guardar(element)">Guardar</button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>

      <mat-paginator #paginator="matPaginator" [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5, 10]">
      </mat-paginator>
    </form>
  </div>
  <br>
  <br>
  <form>
    <table mat-table [dataSource]="dataSource1" class="mat-elevation-z8">

      <ng-container matColumnDef="idProducto">
        <th mat-header-cell *matHeaderCellDef>ID PRODUCTO</th>
        <td mat-cell *matCellDef="let element">{{ element.idProducto }}</td>
      </ng-container>

      <ng-container matColumnDef="descripcionProducto">
        <th mat-header-cell *matHeaderCellDef>DESCRIPCION</th>
        <td mat-cell *matCellDef="let element">
          <mat-form-field>
            <input matInput [value]="element.descripcionProducto" />
          </mat-form-field>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumProd"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumProd"></tr>
    </table>

    <mat-paginator #paginator2="matPaginator" [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5, 10]"
      showFirstLastButtons>
    </mat-paginator>
  </form>
</div>

Componet.ts

import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { Control } from './Control';
import { ControlService } from './control.service';
import { MatTableDataSource } from '@angular/material/table';
import { Estado } from './Estado.ts';
import { DateAdapter } from '@angular/material/core';
import { FormControl, FormGroup, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { formatDate } from '@angular/common';
import { MatPaginator } from '@angular/material/paginator';
import { CatalogoProducto } from './CatalogoProducto';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'prueba-angular-material';
  displayedColumns: string[] = [
    'idControl',
    'cveEstado',
    'comentario',
    'horaInicio',
    'fechaRegistro',
    'esValido',
    'botonSave',
  ];
  displayedColumProd: string[] = [
    'idProducto',
    'descripcionProducto'
  ];
  estadoModel: Estado[] = [];
  control: Control[] = [];
  controlModel: Control = new Control();
  estadoSeleccionado: any;
  idSeleccionado: string = '';
  comentIngresado: string = '';
  horaIngresada: string ='';
  fechaIngresada: any;
  dataModel: any[] = [];
  horaInvalida = true;
  limiteExcedido = false;
  catProducto: CatalogoProducto[] = [];
 

  selected : any;
  
  @ViewChild('paginator') paginator!: MatPaginator;
  @ViewChild('paginator2') paginator2!: MatPaginator;

  constructor(
    private controlService: ControlService,
    private dataAdapter: DateAdapter<Date>
  ) {
    this.dataAdapter.setLocale('es-MX');
  }

  ngOnInit(): void {
    

    this.obtenerLista();
    this.obtenerListaEstados();
    this.obtenerCatalogoProducto();
    
  }

  esValidoArr = [
    { label: 'Si', valor: '1' },
    { label: 'No', valor: '0' },
  ];


  //obtiene el id y el valor del campo esValido
  select(valor:Event, row:any){
    console.log("ID   ",row.idControl);
    console.log("VALOR       ",valor);

  }

  //obtiene la lista del servicio
  dataSource: any;
  private obtenerLista() {
    this.controlService.obtenerLista().subscribe((response) => {
      this.control = response.data;
     
      this.dataSource = new MatTableDataSource(this.control);
     
      this.dataSource.paginator = this.paginator;
    });
  }

  //obtiene la lista del catalogo producto
  dataSource1: any;
  private obtenerCatalogoProducto() {
    this.controlService.obtenerCatProd().subscribe((response) => {
      this.catProducto = response.data;
      
      this.dataSource1 = new MatTableDataSource(this.catProducto);
      this.dataSource1.paginator2 = this.paginator2;
    });
  }

  //obtiene la lista de estados para el select
  private obtenerListaEstados() {
    this.controlService.obtenerEstados().subscribe((response) => {
      console.log("PRUEBA  estados" ,response.data);
      this.estadoModel = response.data;
    });
  }

  //obtiene la cve del estado que se selecciona y su id
  cambiarEstado(valor: Event, row: any) {
    this.estadoSeleccionado = valor;
    this.idSeleccionado = row.idControl;

    console.log(' ID SELECC ' + this.idSeleccionado);
    console.log(' ESTADO SELECC ' + this.estadoSeleccionado);
  }

  //obtiene el valor ingresado en el input coment  y el id
  changeValue(e: any, row: any) {
    this.comentIngresado = e.value;
    console.log(' INPUT COMENT  ' + this.comentIngresado);
    if (this.comentIngresado.length > 15) {
      row.limiteExcedido = true;
      e.target.value = this.comentIngresado.slice(0, 15);
    } else {
      row.limiteExcedido = false;
    }
  }

 //obtiene el valor ingresado en el input hora, y el id
 changeValueHora(e: any, row: any) {
  this.horaIngresada = e.value;
  console.log(' INPUT HORA   ' +this.horaIngresada);
  this.validarHora();
}

validarHora() {
  console.log(' ENTRA A VALIDAR HORA');
  const regex = new RegExp("^[0-9]{1,2}:[0-9]{1,2}$");
  this.horaInvalida = !regex.test(this.horaIngresada);
  console.log('HORA '  + this.horaInvalida);
}


  //OBTIENE EL VALOR DE LA FECHA SELECCIONADA
  onDateChange(valor: Event, row: any) {
    this.fechaIngresada = valor;
    console.log('FECHA SELECC  ' + this.fechaIngresada);
  }

  //funcion para darle formato a la fecha internamente
  formatDateToString(date: Date): string {
    if (date) {
      const format = 'yyyy-MM-dd';
      const locale = 'en-US';
      return formatDate(date, format, locale);
    }
    return '';
  }

  deshabilitarOpcion(cveEstado: string): string[] {
    switch (cveEstado) {
      case 'INP':
        return ['FINISHED','PENDING'];
      case 'En Proceso':
        return ['Iniciado'];
      default:
        return [];
    }
  }

  guardar(element: any) {
    if (element.editar) {
      console.log(`Desactivado para ${element.idControl}`);
      element.editar = false;

      if (this.comentIngresado == '') {
        alert('No se han modificado campos');
      } else {
        console.log(' ENTRA ELSE  ');
        this.controlModel.cveEstado = this.estadoSeleccionado;
        this.controlModel.comentario = this.comentIngresado;
        this.controlModel.idControl = this.idSeleccionado;
        this.controlModel.fechaRegistro = this.formatDateToString(
          this.fechaIngresada
        );

        console.log('prueba fecha final  ' + this.controlModel.fechaRegistro);
        this.controlService
          .updateCampo(this.controlModel)
          .subscribe((data) => {
            this.controlModel = data;
            this.comentIngresado = '';
            this.estadoSeleccionado = '';
            this.fechaIngresada = '';

            alert('Agregado correctamente');
          });
      }
    } else {
      console.log(`Activado para ${element.idControl}`);
      element.editar = true;
    }
  }
}

No se que me esta faltando o haciendo mal que no toma el otro paginador

1 respuesta 1

2

A #paginatorProd le tienes que agregar ="matPaginator", queda así:

#paginatorProd=“matPaginator”

para hacer la referencia a cada elemento, mientras que en el componente tienes:

@ViewChild('paginatorProd') paginatorProd: MatPaginator;

Código de ejemplo:

Componente

export class TablaComponent {

  // tabla2 es duplicado de tabla.
  dataSource = new MatTableDataSource(tabla);
  dataSource2 = new MatTableDataSource(tabla2);

  @ViewChild('paginator') paginator!: MatPaginator;
  @ViewChild('paginator2') paginator2!: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource2.paginator = this.paginator2;
  }
}

HTML

    // Tabla
    <table mat-table [dataSource]="dataSource">...
    </table>

    <mat-paginator
      #paginator="matPaginator"
      [pageSizeOptions]="[5, 10, 20]"
      showFirstLastButtons>
    </mat-paginator>

    // Tabla 2
    <table mat-table [dataSource]="dataSource2">...
    </table>

    <mat-paginator
      #paginator2="matPaginator"
      [pageSizeOptions]="[5, 10, 20]"
      showFirstLastButtons>
    </mat-paginator>

Resultado introducir la descripción de la imagen aquí

11
  • lo pongo asi #paginatorProd=“paginatorProd” y me manda error en la consola, que dice: No directive found with exportAs 'paginatorProd'
    – Root93
    Commented el 14 jul. 2023 a las 23:13
  • Es matPaginator, no paginatorProd.
    – René
    Commented el 15 jul. 2023 a las 0:39
  • Actualice la respuesta, hay varias formas de hacerlo, desde hacer una función hasta usar QueryList así: @ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();, la forma más simple es la que puse en la respuesta.
    – René
    Commented el 15 jul. 2023 a las 0:49
  • ya probé agregando esto #paginatorProd=“matPaginator” y poniendo en el component como pusiste y sale el mismo error No directive found with exportAs 'matPaginator'
    – Root93
    Commented el 15 jul. 2023 a las 18:04
  • 1
    Checa tu código y vuelve a comparar, tienes this.dataSource1.paginator2
    – René
    Commented el 17 jul. 2023 a las 3:53

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.