0

Boa tarde, sou novo em angular, estou tentando fazer uma pesquisa via ionic, mas não estou conseguindo, segue o fonte:

inserir a descrição da imagem aqui inserir a descrição da imagem aqui inserir a descrição da imagem aqui

Muito Obrigado.

0

1 Resposta 1

0

O 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();
}

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 .