El bucle for en Angular

Angular tiene dos API de plantillas distintas: AngularJS usa ng-repeat, mientras que Angular moderno admite el bloque @for en las versiones que incluyen esa sintaxis. Para trabajar con arreglos de JavaScript dentro de la lógica de la aplicación, usa un bucle for o forEach; estos procesan datos, pero no renderizan elementos de plantilla por sí solos.

Identifica la versión de Angular antes de elegir un bucle

Primero identifica qué framework usa el proyecto. AngularJS es el framework anterior y renderiza los elementos de una colección con la directiva ng-repeat. Angular moderno usa un sistema de plantillas distinto; los proyectos cuya versión de Angular admite @for pueden usar ese bloque para renderizar una colección. Antes de añadirlo, comprueba qué sintaxis admite la versión de tu proyecto.

Usa un bucle JavaScript for o forEach en la lógica de un componente o controlador cuando necesites calcular, transformar o procesar valores de otra manera. Para renderizar una colección, utiliza la API de plantillas que corresponda al framework.

Renderiza una lista en AngularJS con ng-repeat

En una plantilla de AngularJS, ng-repeat="item in items" crea una copia del elemento por cada valor de items. Por ejemplo, el fragmento <ul><li ng-repeat="item in items">{{ item }}</li></ul> renderiza una lista a partir de una colección proporcionada por el controlador o el ámbito. Si items contiene ['Apple', 'Banana', 'Cherry'], la página muestra un elemento de lista por cada fruta. Esta es una directiva de AngularJS, no sintaxis de Angular moderno.

Renderiza una lista en Angular moderno con @for

En un proyecto de Angular moderno cuya versión admita el bloque @for, puedes usar en una plantilla @for (item of items; track item.id) { <li>{{ item.name }}</li> } dentro de un elemento de lista. Aquí, items es la colección del componente, item es el registro actual y track item.id proporciona a Angular una identidad estable para cada registro a medida que cambia la colección. Usa una clave única de tus datos y adapta los nombres de las propiedades a los del componente. Este ejemplo muestra únicamente la sintaxis y no se ejecutó en un proyecto de Angular para este artículo; compruébala con la versión y la configuración de plantillas de tu proyecto.

Usa for y forEach de JavaScript para procesar arreglos

Usa un bucle imperativo de JavaScript cuando necesites calcular o transformar valores en la lógica de la aplicación. El ejemplo siguiente suma una colección de precios. Es una ilustración independiente de JavaScript y no se ejecutó para este artículo.

const items = [
  { name: 'Notebook', price: 4 },
  { name: 'Pen', price: 2 }
];

let total = 0;
for (const item of items) {
  total += item.price;
}

console.log(`Total: $${total.toFixed(2)}`);

El bucle lee cada elemento y suma su precio a total; la última línea envía el importe con formato a la consola de JavaScript. Una llamada de retorno de forEach es otra opción para realizar una operación en cada elemento del arreglo, por ejemplo, items.forEach(item => console.log(item.name)). Usa cualquiera de las dos formas para trabajar con datos; si quieres renderizar elementos en una plantilla, usa ng-repeat o un bloque @for que admita el proyecto.

Elige el tipo de bucle según la tarea

Las directivas y los bloques de plantilla conectan los datos de una colección con los elementos renderizados. Los bucles de JavaScript ejecutan lógica de la aplicación; cualquier cambio en los datos debe hacerse mediante el estado del componente o controlador que usa la plantilla.

Preguntas frecuentes sobre los bucles en Angular

¿Está disponible ng-repeat en Angular moderno?

ng-repeat es una directiva de AngularJS. Angular moderno usa su propia sintaxis de plantillas, que incluye @for en las versiones que lo admiten.

¿Puedo usar un bucle JavaScript for en un componente de Angular?

Sí. Úsalo en la lógica del componente para hacer cálculos u otras operaciones con arreglos. No crea elementos de plantilla; vincula los datos resultantes a la plantilla y utiliza la sintaxis de renderizado de esa plantilla.

¿Cuándo conviene usar forEach?

Usa forEach cuando quieras ejecutar una llamada de retorno para cada elemento de un arreglo. Elige un bucle for normal si la lógica se beneficia de controlar explícitamente la iteración. Ninguna de estas formas es una directiva para renderizar plantillas.

¿Cómo añado un elemento a una colección que se muestra en pantalla?

Actualiza la colección que mantiene el componente o controlador y deja que la sintaxis de plantilla correspondiente renderice los valores actuales. El método concreto para actualizarla depende de cómo la aplicación gestione su estado.