The problem I have is that the paginator cannot make it work since it marks this error:
ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
What I am doing is that first with a select field in html I select the option and this when marking the desired option, click on a button and display the table, which it does but when trying to page the data it generates the error previous.
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>
In the part of evaluating what record was made is this:
clienteSeleccionado(cliente) {
this.cliente = cliente;
}
In the button, to register I did it like this:
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')
)
})
}
The strange thing is that if it responds and paints the data in the table, the drawback is that the line gives an error this.dataSource.paginator = this.paginator;
, I have tried to base myself on this example but I see that the data pagination enters it like this
ngOnInit() {
this.dataSource.paginator = this.paginator;
}
But where I enter it is where I do the search and it returns null.
UPDATE
Make the following changes;
dataSource: MatTableDataSource<datosCliente> = new MatTableDataSource([]);
selection: SelectionModel<datosCliente> = new SelectionModel<datosCliente>(true, []);
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
And where do I search like this:
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;
});
But it remains unresolved whether the pager recognizes the length
Static = true. Access in ngOnInit
can be fixed by using ngAfterViewInit() Executed when the component's view has been fully initialized. This method is initialized after Angular has initialized the component's view and child views. It is called after ngAfterContentChecked. When static is set to false, it is only available during the ngAfterViewInit lifecycle binding If you are using a ChildComponent and it is hidden or dynamically loaded in some way via component binding (either with property binding or an API call), then * set static to false. Yes Yes ChildComponent is always available on the page and is never hidden. So use static false or static true