Como fazer um filter em um Observable retornado do Cloud FireStore?
export interface Pessoa {
nome: string;
cidade: string;
telefone: string;
}
pessoaList: Observable<Pessoa[]>;
Tenho o método abaixo que é chamado toda vez que atualizo o valor do campo de pesquisa, o retorno do Firebase é um Observable, gostaria de atualizar pessoaList fazendo um filter com o nome da pessoa que quero exibir na tela.
getItems(searchbar){
var q = searchbar.srcElement.value;
if (!q) {
return;
}
// Isto aqui não funciona!!!
this.pessoaList = this.pessoaList.filter((v) => {
if(v.nome && q) {
if (v.nome.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
}
});
console.log(q, this.pessoaList.length);
}
No meu HTML tenho algo parecido como abaixo, gostaria de mostrar somente as pessoas que estiverem com o nome que eu digitar no SearchBar.
<ion-searchbar [(ngModel)]="myInput"
[showCancelButton]="shouldShowCancel" (ionInput)="getItems($event)"
(ionCancel)="onCancel($event)">
</ion-searchbar>
<ul *ngFor="let p of pessoaList| async">
<li> {{p.nome }} </li>
</ul>