Created
May 19, 2024 21:08
-
-
Save juanchehin/a223c83de4f487f23d28953bb897d892 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Productos | |
myControlProducto = new FormControl<string | Producto>(''); | |
productos: Producto[] = []; | |
filteredOptionsProductos: Observable<Producto[]> | undefined; | |
ngOnInit() { | |
this.cargarSucursales(); | |
// Productos | |
this.filteredOptionsProductos = this.myControlProducto.valueChanges.pipe( | |
startWith(''), | |
map(value_producto => { | |
console.log('value_producto::: ', value_producto); | |
const producto_codigo = typeof value_producto === 'string' ? value_producto : value_producto?.codigo_producto; | |
console.log('producto_codigo::: ', producto_codigo); | |
return producto_codigo ? this._filterProducto(producto_codigo as string) : this.productos.slice(); | |
}), | |
); | |
console.log('this.filteredOptionsProductos::: ', this.filteredOptionsProductos); | |
} | |
// ================================================== | |
// **** Busqueda Productos **** | |
// ================================================== | |
displayFnProducto(p_producto: Producto): string { | |
console.log('p_producto displayFnProducto::: ', p_producto); | |
console.log('p_producto.codigo_producto displayFnProducto::: ', p_producto.codigo_producto); | |
if((p_producto != undefined) && (p_producto.codigo_producto != undefined) && (p_producto != null)) | |
{ | |
console.log("pasa dfp 1") | |
return p_producto.codigo_producto && p_producto.codigo_producto ? p_producto.codigo_producto : ''; | |
} | |
console.log("pasa dfp 2") | |
return ''; | |
// return p_producto.codigo_producto && p_producto.codigo_producto ? p_producto.codigo_producto : ''; | |
} | |
// ================================================== | |
private _filterProducto(p_name_prod: string): Producto[] { | |
console.log('p_name_prod::: ', p_name_prod); | |
const filterValue_prod = p_name_prod.toLowerCase(); | |
console.log('filterValue_prod::: ', filterValue_prod); | |
this.buscarProductos(filterValue_prod); | |
console.log(' this.productos: _filterProducto:: ', this.productos); | |
return this.productos.filter(value_producto => | |
{ | |
console.log('value_producto::: filter ', value_producto); | |
console.log('filterValue_prod::: ', filterValue_prod); | |
value_producto.codigo_producto.toLowerCase().includes(filterValue_prod) | |
} | |
); | |
} | |
------------------------- HTML ---------------------------------- | |
<form class="example-form"> | |
<mat-form-field class="example-full-width"> | |
<mat-label>Buscar producto...</mat-label> | |
<input type="text" matInput [formControl]="myControlProducto" [matAutocomplete]="productos_auto"> | |
<mat-autocomplete #productos_auto="matAutocomplete" [displayWith]="displayFnProducto"> | |
@for (option_producto of filteredOptionsProductos | async; track option_producto) { | |
<mat-option [value]="option_producto">{{option_producto.codigo_producto}}</mat-option> | |
} | |
</mat-autocomplete> | |
</mat-form-field> | |
</form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
try to add return keyword at line 69, so that the filtered product is returned when truthy