0

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>

1 Resposta 1

0

Você quer filtrar o array e não o observable que envelopa o array. Portanto você deve mapear usando a função map o conteúdo do observable (o qual é Pessoa[]) e então sim filtrá-lo.

getItems(searchbar){
    var q = searchbar.srcElement.value;

    if (!q) {
      return;
    }    

    this.pessoaList = this.pessoaList
        .map(pessoaList => pessoaList.filter((v) => {
            if (v.nome && q) {
                return v.nome.toLowerCase().indexOf(q.toLowerCase()) !== -1;
            }
        }));
}
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .