0

Estoy tratando de implementar una barra de busqueda para filtrar por valores de mi información, el codigo flitra pero tras unos segundos despues de la busqueda vuelve a mostrar todos los elementos, o sea elimina el filtro.

Supongo que cuando ejecuta FilterCoops vuelve a ejecutar inicializeCoops por eso el array vuelve a su estado inicial

¿Como puedo hacer para que el array conserve su estado en el filtro de busqueda?

Mi archivo home.ts es este:

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { CoopProvider } from '../../providers/coop/coop';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  cooperatives: any = [];
  categories: any = [];


  constructor(public navCtrl: NavController,
              public coopProv: CoopProvider,
              public actionSheetCtrl: ActionSheetController,
              ) {}

  ionViewDidLoad(){
    this.inicializeCoops()
    this.inicializeCategoies();
  }

  inicializeCoops() : void {
    this.coopProv.getCoops()
    .subscribe(
      (data) => { // Success
          this.cooperatives = data;

      },
      (error) =>{
        console.error(error);
      }
    )
  }


  inicializeCategoies() {
    this.coopProv.getCategories()
    .subscribe(
      (data) => { // Success
        this.categories = data;
      },
      (error) =>{
        console.error(error);
      }
    )
  }



  filterTechnologies(param : any) : void
  {
     this.inicializeCoops();


     let val : string   = param;

     // DON'T filter the technologies IF the supplied input is an empty string
     if (val.trim() !== '')
     {
        this.cooperatives = this.cooperatives.filter((item) =>
        {
          return item.name.toLowerCase().indexOf(val.toLowerCase()) > -1 || item.description.toLowerCase().indexOf(val.toLowerCase()) > -1;
        })
     }
  }

}

Y el provider es este:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
  Generated class for the CoopProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class CoopProvider {
  urlApi = 'http://miurl.algo:8000/'

  cooperatives: any;

  constructor(public http: HttpClient){
  }

  getCoops() {
    return this.http.get(this.urlApi + 'api/v1/cooperatives/')  
    }


  getCategories() {
      return this.http.get(this.urlApi + 'api/v1/categories/')
    }

}

Dejo un gif con la grabación de la pantalla para que puedan ver el comportamiento de la app

introducir la descripción de la imagen aquí

1
  • Podrías utilizar un pipe, te comparto este ejemplo
    – LordOfLies
    Commented el 10 abr. 2019 a las 23:06

1 respuesta 1

1

El problema es que tu función this.coopProv.getCoops() se ejecuta de forma asíncrona por ser un observable, la solución en tu caso, es realizar el filtro sin llamar más datos.

filterTechnologies(param: any): void {
     let val: string = param;
     // DON'T filter the technologies IF the supplied input is an empty string
     if (val.trim() !== '') {
        this.cooperatives = this.cooperatives.filter((item) => {
          return item.name.toLowerCase().indexOf(val.toLowerCase()) > -1
            || item.description.toLowerCase().indexOf(val.toLowerCase()) > -1;
        });
     }
  }

Otra posible solución es agregar una promesa para esperar a que estén listos los resultados y después filtrarlos.

  inicializeCoops(): Promise<any> {
    return new Promise((result) => {
      this.coopProv.getCoops().subscribe((data) => { // Success
          this.cooperatives = data;
          result();
        }, (error) => {
          console.error(error);
          result();
        }
      );
    });
  }

  async filterTechnologies(param: any): void {
     await this.inicializeCoops();
     let val: string = param;
     // DON'T filter the technologies IF the supplied input is an empty string
     if (val.trim() !== '') {
        this.cooperatives = this.cooperatives.filter((item) => {
          return item.name.toLowerCase().indexOf(val.toLowerCase()) > -1
            || item.description.toLowerCase().indexOf(val.toLowerCase()) > -1;
        });
     }
  }

Si no dominas el uso de promesas y observables te recomiendo investigar sobre programación reactiva.

1
  • 1
    Gracias Juan, me sirvió la primera segerencia que me diste. Solo tuve que agregar otra variable cooperatives_filter
    – kkroto
    Commented el 11 abr. 2019 a las 15:15

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.