Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular esencial

Utilizar operadores adicionales en NgFor

¡Prueba gratis durante 10 días

nuestros 1292 cursos !

Prueba gratis Mostrar modalidades de suscripción
Aunque por defecto la directiva NgFor es extremadamente útil y práctica, podemos sacarle algo más de provecho con los operadores adicionales que nos permiten detectar detalles como el último o el primer elemento de la lista. En esta lección vamos a integrar estos operadores con la directiva NgIf para desplegar contenido condicional.
07:58

Transcripción

En esta lección te voy a mostrar cómo utilizar algunos operadores adicionales dentro de una lista de Angular. Acá yo estoy trabajando una aplicación, estoy dentro del módulo principal, en este caso llamado'app. component. ts'. Por ahora tengo definido una variable llamada'libros' que contiene un'array' en el cual ingreso objetos. Tal como lo definí, dentro de esta declaración tengo acá una variable que contiene un'array' y que a su vez está poblada por diferentes objetos. Esos objetos tienen definidos diferentes propiedades como'id', 'título', 'autor', 'descripción'. Y una vez que ya tengo definido este'array', dentro de la plantilla, en este caso'app. component. html', estoy desplegando una lista a través de la directiva'ngFor' qué me está mostrando cada uno de los ítems que se encuentran en este "array". El resultado de esto es una aplicación que me muestra las listas de los libros que se encuentran almacenados en mi aplicación. Si yo quisiera, por ejemplo, mostrar otra propiedad como en este caso'autor', solamente debo copiar y pegar esta expresión, en este caso'libro', punto, 'autor' y vamos a ver que ya está desplegando el valor del autor del libro correspondiente. Ahora, nosotros podemos incluir algunos operadores que nos van a ayudar a seleccionar o desplegar la información de forma distinta en Angular y que puede ser bastante útil a la hora que estamos trabajando una aplicación un poco más compleja, por ejemplo, podemos saber cuál es el número de índex de cada uno de los elementos. Esto lo vamos a hacer incluyendo acá, en la sección donde está el "for", dentro de las comillas y una vez que hemos definido la instancia –vamos a cerrar esta ventana acá para poder ver mejor la plantilla– digamos que una vez que he definido la instancia, en este caso'libro', por cada uno de los elementos que se encuentren en el "array"'libros', voy a incluir acá un punto y coma y voy a definir que el índex, que es una propiedad que se encuentra dentro del'ngFor', sea igual a índice y ahora índice está disponible dentro de cada una de las las iteraciones. Vamos a ver cuál es el valor que me está desplegando y vamos a poner acá'indice', vemos el resultado y vemos que me está mostrando cuál es el número de índex. Esto significa cuál es el número según el conteo de Javascript del elemento que se encuentra en el "array". Recordemos que los "arrays" de Javascript comienzan con la numeración en 0 y por eso está apareciendo a este número. Si yo quisiera, por ejemplo, seleccionar el ítem que nada más tenga el índex número 5, vamos a utilizar este valor, pero en este caso yo voy a modificarlo, voy a poner acá un "span" y voy a tomar este valor que se encontraba dentro de índice y lo que voy a hacer es que voy a utilizar la directiva 'ng If' para desplegar este bloque, únicamente cuando el valor que se encuentra acá nos dé un valor específico. En este caso vamos a decir que si'indice' es igual a, por ejemplo, '5', vamos a mostrar este'span'. Ahora, yo ya he asignado acá una clase específicamente para este "span" y lo que vaa hacer es que si se despliega dentro de una lista, va a mostrar una casilla con un texto rojo. Vamos a ver el resultado y vemos que únicamente el elemento que tenga el valor'5', que sería 0, 1, 2, 3, 4, 5, me va a mostrar esta casilla. Vamos a agregarle acá un texto para que se vea más sencillamente y que sea más fácil de detectar, vamos a poner acá que este "span" nos diga que este elemento está destacado, por ejemplo si lo queremos hacer que el usuario seleccione primero ese elemento o queremos incluir algún tipo de control adicional, este caso estamos destacando únicamente el elemento que este en el índex 5. Podemos también utilizar otro tipo de operadores, como por ejemplo, en vez de seleccionar un elemento arbitrario, podemos seleccionar el primero. Esto lo hacemos utilizando el comando'first' que también es un elemento que se encuentra dentro de'ngFor' y vamos a definirlo como 'esPrimero'. Ahora teniendo este valor que nos va a devolver "true" o "false", vamos a utilizar el mismo concepto que utilizamos para desplegar el elemento número 5. Por ahora lo voy a comentar, para que no se despliegue y en este caso, en vez de evaluar que sea'indice = 5', vamos a analizar que sea primero. Entonces, el valor'first' se va a activar como'true'en caso de que estemos trabajando en el primer ítem y en todos lo demás se va a mostrar como'false', así que el resultado es que solo nos muestra el primer elemento de la lista. Otra cosa que podemos hacer, por ejemplo, si yo quisiera que esto se muestre únicamente con el último elemento, puedo copiar básicamente el mismo valor y en este caso, en vez de poner'first', ponemos la propiedad'last' y en vez de poner'esPrimero', ponemos 'esUltimo' y utilizamos el mismo principio, vamos a utilizar el "span" que se va a mostrar únicamente si el valor es'último', es'true' así que vamos a revisar el resultado y vemos que nos muestra el primero y nos muestra el último. Un último operador que podemos examinar es que tenemos la opción de seleccionar los elementos pares o impares. Voy a comentar los elementos que hemos incluido para que no nos afecten dentro de la lista a nivel visual y lo que vamos a hacer es que vamos a desplegar, por ejemplo, únicamente si un elemento es par. Esto lo vamos a hacer utilizando la propiedad'odd' y le vamos a asignar que en caso de que el elemento sea par, lo va a seleccionar y vamos a definir como'true' el valor'esPar', así que voy a utilizar una vez más la misma sintaxis que está utilizando 'ngIf'. En caso de que'esPar' sea cierto o'true' vamos a desplegar esta etiqueta'span'. Revisamos y vemos que nos está mostrando los elementos pares. Para mostrar los elementos impares, también podemos utilizar, en vez de'odd' podemos utilizar'even' y nos va a desplegar dinámicamente los elementos que sean impares. Ahora, esto significa que si nosotros modificamos cualquiera de los valores, automáticamente se va a seleccionar, no importa en el lugar en que yo haya puesto este libro. En el caso de la sintaxis que estoy utilizando, solamente va a seleccionar los elementos que sean impares, también según el ítem seleccionado o las demás diferentes operadores. Esto nos puede ayudar a nosotros a desplegar listas un poco más sofisticadas dentro de nuestras aplicaciones Angular.

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.