Como acessar chave e valor em ngFor do Angular

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.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

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!