Repetição com @for
Renderize listas com @for e expressões de rastreamento.
Repetição com @for é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Repetição com for
O bloco at-for repete o conteúdo para cada item de uma coleção. Ele substitui a antiga diretiva star-ngFor e exige uma expressão track.
Sintaxe básica de for
Escreva o símbolo de arroba, a palavra for, depois item of items e uma cláusula track obrigatória que indique uma chave exclusiva.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }Por que track é obrigatório
A expressão track informa ao Angular como identificar cada item entre as alterações, permitindo reutilizar nós do DOM em vez de recriá-los. Isso melhora muito o desempenho.
Rastreando por identidade
Se os itens não tiverem um id estável (por exemplo, uma lista de cadeias primitivas), você poderá rastrear pelo próprio item.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }O bloco empty
Um bloco at-empty é renderizado quando a coleção não tem itens. Ele vem depois da chave de fechamento do bloco at-for.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Variáveis contextuais
Dentro de um bloco at-for, há variáveis úteis disponíveis, incluindo index, count, first, last, even e odd. Capture-as com let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }A variável index
O valor dollar-index fornece a posição baseada em zero do item atual e geralmente recebe um alias em uma variável local, como mostrado acima.
first e last
Os valores booleanos dollar-first e dollar-last são verdadeiros para o primeiro e o último item, sendo úteis para estilos ou separadores.
even e odd
Os valores booleanos dollar-even e dollar-odd ajudam a aplicar estilos alternados às linhas.
Repetindo sobre um sinal
A coleção pode vir de um sinal; basta chamá-lo na expressão for.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Benefício de desempenho
Como track é obrigatório, o novo at-for é mais rápido que star-ngFor sem trackBy, pois o Angular sempre sabe como associar os itens aos nós do DOM.
Verificação rápida: repetição
A exigência do bloco for.
Recapitulação: repetição
Você aprendeu o bloco at-for com sua expressão track obrigatória, o bloco at-empty para coleções vazias e variáveis contextuais como index, first, last, even e odd. Ele substitui star-ngFor. A seguir: seleção com at-switch.
Perguntas Frequentes
A aula “Repetição com @for” é grátis?
Sim — o texto completo de “Repetição com @for” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Repetição com @for”?
Renderize listas com @for e expressões de rastreamento. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Repetição com @for”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Renderização condicional com @if
- Repetição com @for
- Alternância com @switch
- Carregamento adiado com @defer