Ionic 4 Query

Question

Good afternoon, I’m new in angular, I’m trying to do a search via Ionic, but I’m not getting, follow the source:

Thank you very much.

Answer 1

Your *ngFor is set to repeat items from the named list contact, then, when executing the method find you need to filter the way you want and then set this value in the variable contact.

Getting something like:

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

Only I think there are still spaces for improvement in the code, as for example, if it type too fast, cancel the execution of subscribe previous and only keep new.

It would be something like:

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