Ao abrir a página inicial do projeto os contatos não são exibidos, sendo necessário digitar algo no campo de busca. No console o array com os contatos aparece normalmente.
Ao digitar uma letra no campo de busca, os contatos aparecem normalmente.
lista-contatos.html
@for (letra of alfabeto; track letra) {
{{ letra }}
@for (contato of contatosAgrupados[letra]; track contato.id) {
<app-contato
[nome]="contato.nome"
[telefone]="contato.telefone"
[id]="contato.id!"
>
}
}
lista-contatos.ts
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { Cabecalho } from '../../componentes/cabecalho/cabecalho';
import { Container } from '../../componentes/container/container';
import { Contato } from '../../componentes/contato/contato';
import { Separador } from '../../componentes/separador/separador';
import { ContatoService } from '../../services/contato-service';
import { ContatoInterface } from '../../componentes/contato/contatointerface';
import { CommonModule } from '@angular/common';
import { FormularioContato } from '../formulario-contato/formulario-contato';
@Component({
selector: 'app-lista-contatos',
standalone: true,
imports: [
Container,
Cabecalho,
Separador,
Contato,
FormsModule,
RouterLink,
CommonModule,
FormularioContato,
],
templateUrl: './lista-contatos.html',
styleUrl: './lista-contatos.css',
})
//cria um componente Angular chamado ListaContatos e implementa OnInit, ou seja, usa o ciclo de vida ngOnInit(executa quando o componente é carregado)
export class ListaContatos implements OnInit {
//Array com todas as letras do alfabeto para ser utilizado para separar contatos por letra
alfabeto: string = 'abcdefghijklmnopqrstuvwxyz';
//cria a lista para armazenar os contatos
contatos: ContatoInterface[] = [];
contatosAgrupados: { [letra: string]: ContatoInterface[] } = {};
agruparContatos() {
const contatosFiltrados = this.filtrarContatosPorTexto();
this.contatosAgrupados = {};
for (const letra of this.alfabeto) {
this.contatosAgrupados[letra] = contatosFiltrados.filter((contato) =>
this.removerAcentos(contato.nome).toLowerCase().startsWith(letra),
);
}
}
/funcao responsavel por receber um texto para filtrar os contatos/
filtroPorTexto: string = '';
//Angular injeta dependencia (ContatoService)
constructor(private contatoService: ContatoService) {}
//carrega a lista de contatos quando a aplicacao e iniciada
ngOnInit() {
this.contatoService.obterContatos().subscribe((listacontatos) => {
this.contatos = listacontatos;
this.agruparContatos();
console.log(this.contatos);
});
}
// Remove os acentos de uma string
private removerAcentos(texto: string): string {
return texto.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}
filtrarContatosPorTexto(): ContatoInterface[] {
if (!this.filtroPorTexto) {
return this.contatos;
}
return this.contatos.filter((contato) => {
// Compara os nomes sem acentuações
return this.removerAcentos(contato.nome)
.toLowerCase()
.includes(this.removerAcentos(this.filtroPorTexto).toLowerCase());
});
}
filtrarContatosPorLetraInicial(letra: string): ContatoInterface[] {
return this.filtrarContatosPorTexto().filter((contato) => {
// Compara a letra inicial sem considerar acentuações
return this.removerAcentos(contato.nome)
.toLowerCase()
.startsWith(this.removerAcentos(letra).toLowerCase());
});
}
}
