Estou desenvolvendo um app e preciso criar um sistema de busca nele. Segui a documentação oficial e cheguei ao seguinte resultado:
Template
<ion-searchbar class="searchbar-input" (ionInput)="getItems($event)"></ion-searchbar>
<div class="tile" *ngFor="let item of produtos">
<div class="item">
<div class="tile__media">
<img src="{{item .imagem}}" (click)="selecionaProduto(item )">
</div>
<span>R$ {{ item .precoDe.toFixed(2).toString().replace(".", ",") }}</span>
<h3>R$ {{ item .precoPor.toFixed(2).toString().replace(".", ",") }}</h3>
<p>{{ item .nome }}</p>
<img src="assets/imgs/adicionar.png" (click)="adicionaProduto(item )">
</div>
</div>
Controller
public produtos() {
this.storage.get('token').then( (token) => {
this._data.get(token, 'products/1/6')
.then(resposta => {
this.produtos = resposta
this.initializeItems()
}).catch(err => {
console.error(err)
})
})
}
getItems(ev: any) {
this.initializeItems()
const val = ev.target.value
if (val && val.trim()) {
this.items = this.items.filter(
item => item.toString().toLowerCase().includes(val.toString().toLowerCase())
)
}
if (val && val.trim() != '') {
this.produtos = this.produtos .filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1)
})
}
}
public initializeItems() {
this.produtos = this._data.filterItems(this.searchTerm)
}
Funciona perfeitamente com lista estática, mas quando insiro os dados da API, como no exemplo da produtos(), dá erro dizendo que this.produtos .filter não é uma função.
Alguém poderia dar uma luz?