0

Tengo una tabla en la que cargo datos mediante llamada a una API. Además tengo unos filtros para poder filtrar datos. Ahora mismo tengo dos filtros, uno caja de búsqueda y un select, pero me gustaría terner uno más un poco distinto a los anteriores (ya añadido en la vista filtros html), uno en el que filtre al introducir un valor mínimo y/o máximo para filtrar por población. ¿Cómo podría hacer esto? Ya que es una búsqueda por rango y no exacta Gracias.

Vista tablas html

<tbody>
        <tr *ngFor="let pais of paises |buscarRegion:buscarporRegion | searchFilter: searchTerm ">
          <td>{{ pais.region }}</td>
          <td> {{ pais.name }}</td>
          <td>{{ pais.poblacion }}</td>
    
        </tr>
        </tbody>

tabla ts


  paises: Paises[] = [];

  @Input() buscarporRegion = '';
  @Input() searchTerm = '';
   
 
   constructor(private paisesService: PaisesService) { }
 
   ngOnInit(): void {
 
     this.getPaises();
   }

 
   getPaises(){
     this.paisesService.getAllPaises().subscribe((response) =>{
       this.paises = response;
       console.log(response)
 
     });
   }

vista filtros html

<select class="form-control mx-sm-1 mb-2" [(ngModel)]="buscarporRegion">
        <option value="">Regiones</option>
        <option value="{{region.region}}" *ngFor="let region of paises">{{region.region}}</option>
      
      </select>

      <input class="form-control" type="text" placeholder="Buscar País" [(ngModel)]="searchTerm" >

 
      <label>Buscar Población:</label><br>
        <input type="text" placeholder="Min. Población" style="margin-right: 10px;" >
        <input type="text" placeholder="Max. Población" >
    

      </div>

vista filtros html


  @Input() paises: Paises[] = [];
  paisesFiltrados: Paises[] = [];

   buscarporRegion = '';
   searchTerm = '';

pipes

export class BuscarRegionPipe implements PipeTransform {

  transform(value: any, arg: any): any {
    const buscarporregion = [];
    for (const recorrido of value) {
      if(recorrido.region.toLowerCase().indexOf(arg.toLowerCase()) > -1){
        buscarporregion.push(recorrido);
      }
    }
    return buscarporregion;
  } 

export class SearchFilterPipe implements PipeTransform {

  transform(list: any[], filterText: string): any {
    return list ? list.filter(item => item.name.search(new RegExp(filterText, 'i')) > -1) : [];
  }
}
2

1 respuesta 1

1

Usando un callback pipe llamamos a un método dentro del componente restrinjo los datos a que estén dentro de un intervalo podes modificar el método para región población o enlazar la cota superior e inferior dinámicamente con datos de la aplicación o lo que se te ocurra

proyecto desplegado github pages En este primer caso se mostraran los países cuya población esta en el

intervalo cerrado

2000000<=poblacion<=5000000

ng generate pipe callback
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'callback',
  pure: false
})
export class CallbackPipe implements PipeTransform {
  transform(items: any[], callback: (item: any) => boolean): any {
    if (!items || !callback) {
        return items;
    }
    return items.filter(item => callback(item));
}
  

}
en el componente

interface pais {name: string, region: string,poblacion:number}
paises: pais[] = [
    { name: 'UK', region: 'oeste', poblacion: 5000000 },
    { name: 'UK', region: 'este', poblacion: 3000000 },
    { name: 'UK', region: 'norte', poblacion: 1000000 },
    { name: 'UK', region: 'sur', poblacion: 100000000 },
    { name: 'HK', region: 'oeste', poblacion: 700000 },
    { name: 'HK', region: 'este', poblacion: 2000000 },
    { name: 'HK', region: 'norte', poblacion: 500000 },
    { name: 'HK', region: 'sur', poblacion: 4000000 },

  ];
findInterval(country: pais): any {
    return country.poblacion <=5000000 && country.poblacion >= 2000000
  }
en la vista
<ul>
  <li *ngFor="let pais of paises | callback:findInterval">
    Pais:{{ pais.name }} Region:{{pais.region}}
  </li>
</ul>

Por los comentario que haces te aclaro que el pipe callback usa a la función findInterval en la etiqueta de la vista solo tenes que escribir | callback(que es el nombre del pipe):findInterval (que es la función que se ejecutara)

Ahora con valores que se actualicen desde los dos input Generamos un servicio que comunicara el cambio BehaviorSubject es un sujeto que emite el último valor emitido por la fuente Observable almacena
tanto un Observable como un Observador permite la subscripcion mediante el metodo next para enviar datos a un observable Behavior Subject

ng g service parametros
 //parametros.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ParametrosService {
    //le damos un valor inicial
     maxBs = new BehaviorSubject<number>(100000000);
     minBs = new BehaviorSubject<number>(500000);
  // permitimos la subscripcion a el mediante
     maxi = this.maxBs.asObservable()
     mixi = this.minBs.asObservable()
  
  constructor() { 
  // enviamos los ultimos valores
  updatedDataMax(data: number) {
    this.maxBs.next(data);
  }
  updatedDataMin(data: number) {
    this.minBs.next(data);
  }

}

En el pipe inyectamos al servicio para poder detectar al cambio de los valores de la cotas del intervalo

import { Pipe, PipeTransform } from '@angular/core';
import { ParametrosService } from './parametros.service';
@Pipe({
  name: 'callback',
  pure: false
})
export class CallbackPipe implements PipeTransform {
  constructor(private service:ParametrosService) {  }
  transform(items: any[], callback: (item: any,max:number,min:number) => boolean): any {
    let max:number;
    let min:number;
  this.service.maxi.subscribe((valor:number)=>max=valor);
  this.service.mixi.subscribe((valor:number)=>min=valor);
    if (!items || !callback) {
        return items;
    }
    return items.filter(item =>
      callback(item,max,min))
    }

  

  }
  El componente recibe una funcion desde el pipe con los valores de las cotas y le comunicara esos valores a la vista
   // estos valores son los iniciales del input no se detectara su cambio se detectara el cambio mediante
   // la libreria rxjs en el servicio
   max:number=0; min:number=0
   
  paises: pais[] = [
    { name: 'UK', region: 'oeste', poblacion: 5000000 },
    { name: 'UK', region: 'este', poblacion: 3000000 },
    { name: 'UK', region: 'norte', poblacion: 1000000 },
    { name: 'UK', region: 'sur', poblacion: 100000000 },
    { name: 'HK', region: 'oeste', poblacion: 700000 },
    { name: 'HK', region: 'este', poblacion: 2000000 },
    { name: 'HK', region: 'norte', poblacion: 500000 },
    { name: 'HK', region: 'sur', poblacion: 4000000 },

  ];
  constructor(private serviceParam:ParametrosService){}
   ngOnInit(): void {}
   
   
  findInterval(country: pais, max: number, min: number): any {
    console.log('findInterval', max, min)
    return country.poblacion <= max && country.poblacion >= min
  }
  cambiamax(valor:any){
    this.serviceParam.updatedDataMax(valor);
    console.log(valor)
  }
  cammbiamin(valor:any){
    this.serviceParam.updatedDataMin(valor);
     console.log('valor)
  }
  
  
  
  
  

En la vista nos interesa el cambio mediante ngModelChange el cual nos permite mediante el servico actualizar los valores del Input que manejamos localmente en el pipe y la funcion findInterval de callback Asi nos mostrara inicialmente la lista entre los valores
100000000 y 500000 al ingresar desde los inputs a nuevos valores la lista se actualiza automaticamente ya que detecta el cambio gracias al servicio que usa a la libreria rxjs.BehaviorSubject puede tener un valor inicial numerico como en este caso o tambien un metodo que le retorne el valor que mas nos guste para las cotas

  <input type="number" [ngModel]="max" (ngModelChange)="  cambiamax($event)" >
  <input type="number" [ngModel]=" min" (ngModelChange)="cammbiamin($event) " >
   <ul>
  <li *ngFor="let pais of paises | callback:findInterval">
    Pais:{{ pais.name }} Region:{{pais.region}}
  </li>
</ul>

  
  
23
  • Hola, una duda, pero si esos datos quiero buscarlos a través del input de máx mín? cómo enlazo ese input para que me busque los países de por ejemplo mínimo 1.000.000 habitantes y máx. 30.000.000 o la cifra que se quiera?
    – Basileia
    el 9 jul. 2022 a las 15:33
  • muy simple las cotas tendrán el valor del máximo o del mínimo country.poblacion<=this.max && country.poblacion >= this.min ---
    – nestdan
    el 9 jul. 2022 a las 15:39
  • ¿Y en los input de máx y min tendría que poner [ngModel]=findInterval? En los otros dos filtros tengo un ngModel para que funcione. Este como es un poco distinto me tiene un poco perdida. Gracias.
    – Basileia
    el 9 jul. 2022 a las 15:44
  • [(ngModel)]=max----[(ngModel)]=min
    – nestdan
    el 9 jul. 2022 a las 15:50
  • es un enlace muy simple repasa academia-binaria.com/servicios-inyectables-en-Angular
    – nestdan
    el 9 jul. 2022 a las 15:51

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.