Ionic ion-searchbar not working

Ionic Framework ionic-v3
1

Hi, i have other searchbars in my project but just one is not working, here is my code (whose is similar to other searchbars):

PAGE.HTML:
<ion-content padding class="page-medico-formulario"> <ion-searchbar (ionInput)="getItems($event)" placeholder="Buscar..."></ion-searchbar> <ion-list *ngIf="estadoTrue"> <ion-item *ngFor="let e of estadosFiltro" id="{{e.id}}" (click)="setarEstado($event, e.id)"> {{ e.nome }} </ion-item> </ion-list> <ion-content>

PAGE.TS:
estados: any[];
estadosFiltro: any[] = [];
estadoTrue: boolean
initializeItems() { this.estadosFiltro = this.estados; }

 constructor(public navCtrl: NavController, public loadCtrl: LoadingController, public formb: FormBuilder, af: AngularFire, public storage: Storage, public alerts: AlertController, public cid: CidadesProvider) {
    this.estados = cid.getCidades();
    this.initializeItems();
    this.estadoTrue = false;
    this.estadoTrue = true;
  }
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
        this.estadosFiltro = this.estadosFiltro.filter((item) => {
            return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
    }
}

setarEstado($event, id) {
    console.log(id);
}
}

This is basically my page (i’ve taken off code that doesn’t matter for the problem and that is working fine).

I’ve tryed the following:

  • Using (keyup) instead of (ionInput).
  • Taking it off the form it was placed (it was on a formGroup).
  • Removing the *ngIf.
  • Using a ngModel to pass the parameter of the typed word/letters.
  • Creating a method in my provider that pass me the data that is filling my list.

Does someone know what i’m doing wrong?

UPDATE:
Here is the data model of the JSON i’m working with, don’t know if i cam be a problem:

[
  {
    "id": 0,
    "sigla": "AC",
    "nome": "Acre",
    "cidades": [
         "Acrelândia",
         "Assis Brasil",
         ...
       ]
  }, ...
]
2

Jesus Christ, Jackie Boy.
i forgot what i want to search in my JSON, just edited the following:

 this.estadosFiltro = this.estadosFiltro.filter((item) => {
     return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
 })

to

this.estadosFiltro = this.estadosFiltro.filter((item) => {
    return (item.nome.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
3

Hi.
I have the similar problem.
I charge my data from a provider page, but when it is called from a new ts page, the following error is shown

Captura de pantalla_2017-10-15_14-21-03
Captura de pantalla_2017-10-15_14-21-03.png753×187 29 KB

my code:

service page:

import { Injectable } from ‘@angular/core’;

@Injectable()
export class ServicioProvider {
productos: any;

constructor() {
console.log(‘Hello ServicioProvider Provider’);

  this.productos = [

  {referencia: 'T34', producto: 'URBANFUN', precio: 34.65 , imagen: '../../assets/productos/tecnologia/URBANFUN.jpg'},
  {referencia: 'T56', producto: 'INSOMNIA-CRANEAL', precio: 129.35 , imagen: '../../assets/productos/tecnologia/insomnia-relief-Craneal.jpg'},
  {referencia: 'V09', producto: 'TOILETRY-BAG-ORGANIZER', precio: 15.25 , imagen: '../../assets/productos/tecnologia/Toiletry-Bag-Organizer.jpg'},
  {referencia: 'V78', producto: 'SUITCASE-ELASTIC-LUGGAGE', precio: 20.00 , imagen: '../../assets/productos/tecnologia/Suitcase-Elastic-Luggage.jpg'},
  {referencia: 'O88', producto: 'ORIGIANL-HK-WATCH', precio: 125.00, imagen: '../../assets/productos/tecnologia/Origianl-HK-Watch.jpg'},
  {referencia: 'O90', producto: 'CASUAL-BOOTS', precio: 62.55, imagen: '../../assets/productos/tecnologia/Casual-Boots.jpg'},
  {referencia: 'T90', producto: 'EXTERNAL-BATTERY-CHARGER', precio:25.45 , imagen: '../../assets/productos/tecnologia/External-Battery-Charger.jpg'}
];

}

descargarTodo(){
return Promise.resolve(this.productos);
};
ConsegirElementoPorID(id){
for(var i=0; i< (this.productos).length; i++)
{
if(this.productos[i].referencia == id)
{
return Promise.resolve(this.productos[i]);
}
};

}

}

ts. document

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import { ServicioProvider } from ‘…/…/providers/servicio/servicio’;
import { DetallePage } from ‘…/…/pages/detalle/detalle’;

@Component({
selector: ‘page-busqueda’,
templateUrl: ‘busqueda.html’,
})
export class BusquedaPage {

fecha = new Date();
items: any;
productos: any;

constructor(public navCtrl: NavController,
public navParams: NavParams,
public serProvider: ServicioProvider) {

  this.initializeItems();

  this.serProvider.descargarTodo().then(result => {
  this.items = result;
  });

}

detallePagina(id){
this.navCtrl.push(DetallePage, {referencia: id});
};

initializeItems() {
this.items = this.productos;
console.log(this.items);

}

getItems(ev: any) {
console.log(this.items);
// Reset items back to all of the items
this.initializeItems();

// captura los datos en la variable
// set val to the value of the searchbar
let val = ev.target.value;

// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
  this.items = this.items.filter((item) => {
    return (item.producto.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
} 
this.serProvider.descargarTodo().then(result => {
  this.items = result;
  });

}

ionViewDidLoad() {
console.log(‘ionViewDidLoad BusquedaPage’);
}

}

html.document

<ion-navbar color="primary">
     <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Busqueda Productos {{fecha | date: 'shortTime'}}</ion-title>
</ion-navbar>

<ion-searchbar (ionInput)=“getItems($event)” placeholder=“Buscar…”>

{{item.producto}}

{{item.precio | number:'1.2-2' | currency:'EUR':true}} €