Angular esencial

Desplegar listas con NgFor

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a aprender cómo utilizar la directiva NgFor para iterar sobre los valores de un objeto de datos y los convertiremos en una lista de HTML para desplegarse gráficamente en un documento web.
09:10

Transcripción

En esta lección, vamos a aprender cómo insertar listas y cómo iterar sobre valores utilizando Angular 4. Acá yo estoy trabajando una aplicación en la cual ya estoy mostrando en mi servidor a través del comando'ngServe' y voy a trabajar en el componente por defecto, en este caso dentro de la carpeta 'Src', 'App', 'App. component. ts'. Acá yo estoy trabajando en una aplicación que no tiene todavía ningún tipo de código implementado y estoy trabajando dentro de la plantilla de mi componente, también vacía, y también el archivo CSS vacío. Vamos a comenzar a implementar dentro del HTML lo que va a ser la estructura de esta aplicación. En este caso, simplemente vamos a realizar una lista y para hacer una lista vamos a trabajar la etiqueta de HTML utlizando el'ul' y luego, por cada ítem que deseemos agregar, vamos a agregar la etiqueta'li'. Eso es la base estructural de una lista en HTML. Ahora, yo ya tengo algunos estilos previamente hechos para este ejercicio y lo que voy a hacer es que los voy a pegar dentro del archivo'app. component. css' donde tengo la base para esta etiqueta 'li' y también la base para una etiqueta "span" que voy a utilizar dentro de un momento. Ahora vamos a guardar y ya tenemos la estructura básica de la aplicación. Aún no nos va a mostrar ninguna información en particular, pero ya podemos ver que, por ejemplo, nos está mostrando una lista y que ya tenemos un ítem dentro de esta lista. Por ahora, lo que tiene es un texto que dice "ejemplo". Ahora nosotros vamos a trabajar dentro de la aplicación. Me voy acá, dentro de la aplicación, y voy a crear un arreglo. Para crear un arreglo, voy a crear una variable que se va a llamar'libros' y esta variable la voy a hacer que sea de tipo'Array' y el "array" lo voy a definir como que va a estar poblado de elementos de tipo'object'. Básicamente, estoy definiendo que voy a crear una lista de objetos. Ahora vamos a ir al constructor de este componente y dentro del constructor vamos a definir cuál va a ser el valor de'libros'. Vamos a hacerlo simple y en este caso voy a poner'this'punto'libros' es igual a, y vamos a definir un arreglo y, por ejemplo, le vamos a poner en este caso solamente voy a poner'uno', 'dos'y'tres'. Ahora tengo tres diferentes valores dentro de este arreglo. Yo voy a necesitar iterar por cada uno de los elementos que se encuentre en este arreglo para desplegar una lista acá y que muestre cada uno de ellos. Para hacer eso, voy a tomar el valor que tiene, en este caso, la variable'libros' y la voy a desplegar dentro de mi lista. En este caso voy a utilizar una directiva llamada'ngFor'y esto lo voy a instertar a través de: asterisco'ng For'. Voy a utilizar acá la funcionalidad de autocompletado que me ofrece Visual Studio Code y en este caso simplemente voy a hacer clic donde me aparece la opción'ngFor' y voy a poner atención de que no se me cuele este segundo asterisco. La sintaxis correcta sería: asterisco 'ngFor' igual, y tenemos acá una sugerencia de código. Vamos a utilizar este principio para mostrar los elementos de la lista. Vemos que nos dice'let', que es un elemento de JavaScript que nos va a permitir a nosotros crear una variable dentro de este bloque de código y vamos a definir una variable local que se va a llamar'item'. Podemos cambiarle el nombre para que sea más semántico, como'libro', y vamos a conservar el operador'of'y básicamente vamos a decir que por cada uno de los elementos que se encuentren en una colección me genere una instancia llamada'libro'. Ahora, yo voy a cambiar acá'colection'por el nombre de la variable donde se encuentran almacenados mis libros y lo que va a suceder es que Angular va a iterar sobre cada uno de los elementos que se encuentren en'libros', en este caso –vamos a abrirlo dentro de una ventana para poderlo ver en paralelo–, en este caso vamos a tener acá que'libros'tiene un, dos, tres diferentes elementos y eso significa que Angular va a mostrar tres veces esta etiqueta. En este caso estoy trabajando con'li', pero puedes utilizar cualquier etiqueta disponible en HTML, no hay ningún problema, simplemente que con esto se vuelve un poco más fácil desplegar una lista. Ahora para mostrar los valores. Yo voy a modificar dentro de la etiqueta y voy a poner acá una expresión utilizando las llaves y dentro de ella voy a llamar la instancia que va a tener esta iteración, en este caso'libro'. Ahora, cuando llamo'libro', lo que voy a hacer es que voy a llamar cada uno de los valores que se encuentran acá. Entonces, por cada una de las iteraciones, me va a mostrar el valor de'uno', 'dos'o'tres'. Vamos a guardar y vamos a ver el resultado de nuestra aplicación. Vemos que ya me muestra cada uno de los ítems que se estaban almacenando dentro de la variable'libros'. Ahora vamos a modificar un poco esto y vamos a hacer que en vez de mostrarnos valores simples, que en este caso son cadenas de texto, vamos a hacer que nos muestre objetos. Tal como lo definimos anteriormente, esto va a ser un arreglo de objetos. Entonces, voy a modificar la sintaxis. En este caso, lo que voy a hacer es que voy a definir un objeto. Un objeto se define en JavaScript, y en este caso en TypeScript, utilizando las llaves. Voy a poner un par de propiedades, en este caso simplemente voy a poner'id' y voy a definir una identificación. Voy también a poner la propiedad 'título' y la voy a definir a través de: comillas, el nombre de un libro, en este caso'El retrato de Dorian Grey', y vamos a definir el autor. Listo. Tenemos acá un objeto. Para hacer rápido este ejemplo, yo voy a copiar este mismo objeto y voy a agregar otro. Ahora, para que esto nos funcione a nivel de sintaxis, tengo que separar cada uno de los objetos por coma, así que voy a copiar una vez más esta línea y voy a pegar unos cuantos objetos más. Ahora ya tenemos un arreglo que está poblado de objetos. Si yo trato de ver el resultado, por ahora no me va a funcionar correctamente, me va a mostrar mal los valores. Vamos a ver cómo se está desplegando en mi aplicación y vemos que no nos está mostrando la información como nosotros queremos. Así que voy a volver al código y vamos a examinar que se muestren los valores correctamente. Tenemos acá'libro', vamos a guardar nuestra aplicación. Vamos a utilizar ahora, en vez de llamar directamente'libro', en este caso si lo llamamos, lo que nos va a mostrar es todo el objeto que nosotros estamos mandando por cada iteración, o sea, los valores que se encuentran en este, luego en este, luego en este. Vamos a cambiarlo para que nos muestre una propiedad en específico, en este caso el'título'. Así que voy a llamar'libro' punto 'título'. Guardamos y vemos el resultado de nuestra aplicación. Y en este caso nos está mostrando por cada uno los ítems que se encuentran en el'array' cada uno los valores dentro de la lista. Voy a cambiar el valor que se encuentra en'libros'por uno un poco más complejo, pero utilizando más o menos la misma estructura. Como puedes ver, en este caso estoy conservando el'id', 'título', 'autor'y he agregado una propiedad llamada'descripción' a cada uno de los elementos. El resto de la sintaxis la he conservado. Vamos a guardar y ahora sí vamos a ver el resultado final de nuestra aplicación y vemos que Angular me está mostrando una lista de libros por cada uno de los ítems que se encuentran dentro de un "array". También es importante mencionar que aunque yo puedo llamar cada una de las propiedades de acuerdo a su nombre, no necesariamente tengo que incluirlas. Quiero que notes que en este caso solo estoy llamando el'título', pero propiedades como'id', 'autor'o'descripción'no están incluidas. Las puedo incluir en cualquier momento, pero no es un requisito que se incluyan, lo cual me permite a mí más flexibilidad a la hora de trabajar con mis listas.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.