1

El problema que tengo es que el paginador no puedo hacerlo funcionar ya que marca este error:

ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Lo que estoy haciendo es que primero con un campo select en html seleccione la opción y este al marcar la opción deseada, de click en un botón y despliegue la tabla, cosa que si hace pero al tratar de paginar los datos este me genera el error anterior.

HTML

 <mat-form-field class="example-full-width" color="accent">
          <mat-select formControlName="Cliente" placeholder="Cliente" ngModel required (ngModelChange)="clienteSeleccionado(Busqueda.value.Cliente)">
            <mat-option *ngFor="let listaCliente of ListadoClientes" [value]="listaCliente.cliente">
              {{ listaCliente.cliente }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <div>
          <button mat-raised-button type="submit" color="primary"
                  matTooltip="Mostar Por Cliente">
            <mat-icon>manage_search</mat-icon> Buscar Registros
          </button>
        </div>

En la parte de evaluar que registro se hizo es este:

clienteSeleccionado(cliente) {
    this.cliente = cliente;
  }

En el botón, para hacer el registro lo hice así:

submit() {
    var promise = new Promise((resolve, reject) => {
      this.PTService.ListadoPorCliente(this.cliente).subscribe(
        (data) => {
          this.ValorValidacion = "SI";
          this.dataSource = new MatTableDataSource<datosCliente>(data);
          this.selection = new SelectionModel<datosCliente>(true, []);
          this.dataSource.paginator = this.paginator;
          return resolve(data)
        },
        (err) => reject(),
        () => console.log('Datos entregados')
      )
    })
  }

Lo raro es que si responde y me pinta los datos en la tabla, el inconveniente es que da error la linea this.dataSource.paginator = this.paginator; , he tratado de basarme en este ejemplo pero veo que el paginado de datos lo ingresa así

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
  }

Pero yo donde lo ingreso es donde hago la búsqueda y este me retorna null.

ACTUALIZACION

Realice los siguientes cambios;

dataSource: MatTableDataSource<datosCliente> = new MatTableDataSource([]);
  selection: SelectionModel<datosCliente> = new SelectionModel<datosCliente>(true, []);
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

Y en donde hago la busqueda asi:

this.PTService.ListadoPorCliente(this.cliente).subscribe(res => {
      this.ValorValidacion = "SI";
      //console.log(res)
      this.datosResultados = res;
      this.dataSource = new MatTableDataSource(res);
      this.dataSource.paginator = this.paginator;
      
    });

Pero sigue sin resolverse el que el paginador reconozca la longitud

1 respuesta 1

1

Static = true. Access in ngOnInit

Static = false. Access in ngAfterViewInit

puede solucionarse usando ngAfterViewInit() Se ejecuta cuando la vista del componente se ha inicializado por completo. Este método se inicializa después de que Angular ha inicializado la vista del componente y las vistas secundarias. Se llama después de ngAfterContentChecked. Cuando static se establece en false, solo está disponible durante el enlace del ciclo de vida ngAfterViewInit Si usas un ChildComponent y está oculto o cargado dinámicamente de alguna manera a través del enlace de componentes (ya sea con enlace de propiedad o una llamada API), entonces * establecer static en false. Si Si ChildComponent siempre está disponible en la página y nunca está oculto. Entonces usar static false o static true

<mat-paginator [pageSize]="1" [pageSizeOptions]="[1,2]"></mat-paginator>



@ViewChild(MatPaginator, {static:false}) paginator: MatPaginator;
ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
}
4
  • Sabes aun aplicando eso me marcaba error, ya que ocultaba la tabla y al presionar el botón este mostraba la tabla y los datos es por eso que dejaba esto this.ValorValidacion = "SI"; y la ocultaba asi en el html <div *ngIf=" this.ValorValidacion === 'SI'">...</div> Commented el 8 jul. 2022 a las 0:13
  • vi que usas una promesa y dentro lo que parece un llamada a la Api la cual consumís con subscribe siempre uso observables con angular proba convertir la promesa en un observable mediante from trungk18.com/experience/convert-promise-to-observable .....y tambien ValorValidation :BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null).......dev.to/sabrinasuarezarrieta/…
    – nestdan
    Commented el 8 jul. 2022 a las 13:07
  • Para la detección del cambio mediante BehaviorSubject es.stackoverflow.com/a/544071/25463
    – nestdan
    Commented el 8 jul. 2022 a las 13:14
  • *ngIf="!(ValorValidation | async)"---> en el ejemplo veras como recibir al BehaviorSubject como un Observable y subscribirse a su cambio en la vista
    – nestdan
    Commented el 8 jul. 2022 a las 13:25

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.