Boa tarde, sou novo em angular, estou tentando fazer uma pesquisa via ionic, mas não estou conseguindo, segue o fonte:
Muito Obrigado.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeO seu *ngFor
está definido para repetir os itens da lista chamada contact
, então, ao executar o método find
você precisa filtrar da forma que você quiser e depois setar esse valor na variável contact
.
Ficando algo como:
find(ev: any) void {
const val = event.target.value;
// Movi aqui para cima, porque não faz sentido fazer essa verificação
// depois de obter os dados, é muito trabalho jogado fora.
if (!(val && val.trim() != ''))
return;
// Coloquei o método de filtrar aqui para ficar melhor a leitura do código.
const filterMethod = data => {
this.items = data;
this.contact = this.items.filter(item => {
// Aqui talvez você possa usar o método includes em vez de indexOf
// Assim, se pesquisa Vi, você encontra a pessoa com nome Vinicius
return item.nome.toLowerCase().indexOf(val.toLowerCase()) > -1;
});
};
this.contactService.listservice().subscribe(filter);
}
Só que eu acho que ainda há espaços para melhora no código, como por exemplo, se ele digitar muito rápido, cancelar a execução do subscribe
anterior e só manter a nova.
Seria algo como:
// Guardará a inscrição feita sobre pesquisa os contatos.
private findSubscription: Subscription;
find(ev: any) void {
const val = event.target.value;
// Movi aqui para cima, porque não faz sentido fazer essa verificação
// depois de obter os dados, é muito trabalho jogado fora.
if (!(val && val.trim() != ''))
return;
// Verifica se o findSubscription não é nulo, e depois desinscreve o método anterior
this.findSubscription && this.findSubscription.unsubscribe();
// Coloquei o método de filtrar aqui para ficar melhor a leitura do código.
const filterMethod = data => {
this.items = data;
this.contact = this.items.filter(item => {
// Aqui talvez você possa usar o método includes em vez de indexOf
// Assim, se pesquisa Vi, você encontra a pessoa com nome Vinicius
return item.nome.toLowerCase().indexOf(val.toLowerCase()) > -1;
});
};
// Guarda a inscrição do método de filtrar nessa variável para que
// posteriormente, ela possa ser excluida da memória
this.findSubscription = this.contactService.listservice().subscribe(filter);
}
// Não esqueça de adicionar "implements OnDestroy" ao lado do nome do componente/página para que esse método seja chamado quando o mesmo for destruído da memória.
ngOnDestroy(): void {
// Coloquei a desincrição aqui também para limpar a memória dessa inscrição
// Se você, ao longo da sua aplicação, criar muitos subscribes sem realizar
// o unsubscribe do mesmo, é possível que ela fica com problemas de memória.
this.findSubscription && this.findSubscription.unsubscribe();
}