Neste artigo você vai aprender a como acessar chave e valor em ngFor do Angular, vem conferir como é simples fazer isso!
Fala programador(a), beleza? Bora aprender mais sobre Angular!
Introdução
No Angular, o ngFor é uma diretiva que permite iterar sobre um conjunto de dados, como arrays ou objetos, e criar uma instância de um elemento para cada item.
Neste artigo, abordaremos como acessar chave e valor em ngFor, permitindo que você extraia informações adicionais de seus dados enquanto cria seu layout dinamicamente.
Iterando sobre arrays com ngFor
O uso mais comum de ngFor é iterar sobre um array de dados. Veja o exemplo abaixo:
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
Neste exemplo, a diretiva ngFor itera sobre o array items e cria um elemento <li> para cada item.
O valor de cada item é exibido entre as tags <li>.
Acessando o índice do array
Ao iterar sobre um array, você pode querer acessar o índice de cada item.
Para fazer isso, use a variável local index. Veja o exemplo abaixo:
<ul>
<li *ngFor="let item of items; index as i">{{ i }} - {{ item }}</li>
</ul>
Neste exemplo, a variável i contém o índice de cada item no array, permitindo que você exiba o índice ao lado do valor do item.
Iterando sobre objetos com ngFor e acessando chave e valor
Para iterar sobre um objeto e acessar chave e valor em ngFor, você deve usar a função keyvalue do Angular.
Essa função converte o objeto em um array de pares chave-valor, que pode ser iterado com ngFor.
Veja o exemplo abaixo:
<ul>
<li *ngFor="let pair of object | keyvalue">{{ pair.key }}: {{ pair.value }}</li>
</ul>
Neste exemplo, a diretiva ngFor itera sobre o objeto object usando a função keyvalue.
A variável pair contém um objeto com duas propriedades: key e value, que correspondem à chave e ao valor de cada propriedade do objeto original.
Você pode exibir a chave e o valor usando a interpolação {{ pair.key }} e {{ pair.value }}, respectivamente.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Neste artigo, exploramos como acessar chave e valor em ngFor no Angular, permitindo que você extraia informações adicionais de seus dados enquanto cria elementos dinamicamente.
Aprendemos a iterar sobre arrays e objetos e a acessar o índice do array e as chaves e valores do objeto.
Com esse conhecimento, você pode criar layouts dinâmicos e flexíveis que se adaptam às necessidades do seu aplicativo Angular.
Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.
Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!