Bucles con @for
Renderice listas con @for y expresiones track.
Bucles con @for es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Recorrer elementos con for
El bloque at-for repite contenido para cada elemento de una colección. Sustituye a la antigua directiva star-ngFor y requiere una expresión track.
Sintaxis básica de for
Escriba un símbolo arroba, la palabra for, después item of items y una cláusula track obligatoria que indique una clave única.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }Por qué track es obligatorio
La expresión track indica a Angular cómo identificar cada elemento cuando se producen cambios, para que pueda reutilizar los nodos del DOM en lugar de volver a crearlos. Esto mejora considerablemente el rendimiento.
Seguir por identidad
Si los elementos no tienen un id estable (por ejemplo, una lista de cadenas primitivas), puede realizar el seguimiento por el propio elemento.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }El bloque empty
Un bloque at-empty se renderiza cuando la colección no contiene elementos. Aparece después de la llave de cierre del bloque at-for.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Variables contextuales
Dentro de un bloque at-for hay variables útiles disponibles, como index, count, first, last, even y odd. Captúrelas con let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }La variable index
El valor dollar-index proporciona la posición del elemento actual, empezando por cero; a menudo se asigna a una variable local, como se muestra arriba.
first y last
Los valores booleanos dollar-first y dollar-last son true para el primer y el último elemento, respectivamente, y resultan prácticos para aplicar estilos o separadores.
even y odd
Los valores booleanos dollar-even y dollar-odd ayudan a aplicar estilos alternos a las filas.
Recorrer un signal
La colección puede proceder de un signal; solo tiene que llamarlo en la expresión for.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Ventaja de rendimiento
Como track es obligatorio, el nuevo at-for es más rápido que star-ngFor sin trackBy, ya que Angular siempre sabe cómo asociar los elementos con los nodos del DOM.
Comprobación rápida: recorrer elementos
El requisito del bloque for.
Resumen: recorrer elementos
Ha aprendido el bloque at-for con su expresión track obligatoria, el bloque at-empty para colecciones vacías y variables contextuales como index, first, last, even y odd. Sustituye a star-ngFor. Siguiente: cambiar de rama con at-switch.
Preguntas frecuentes
¿La lección «Bucles con @for» es gratis?
Sí — el texto completo de «Bucles con @for» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Bucles con @for»?
Renderice listas con @for y expresiones track. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Bucles con @for»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.