Skip to main content
se añadió 1 carácter en el cuerpo
Origen Enlace
Juan Lozoya
  • 575
  • 4
  • 16

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.

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.

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.

Origen Enlace
Juan Lozoya
  • 575
  • 4
  • 16

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.