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

Angular esencial

Incluir eventos y enlaces en una lista NgFor

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
Cuando creamos una lista usando NgFor, lo hacemos con una sola línea de código y esto significa que muchos crean que todos los ítems de una lista deben tener las mismas conductas. En esta lección aprenderemos a insertar conductas y enlaces con información dinámica en cada elemento de una lista NgFor.
07:04

Transcripción

Vamos a aprender ahora cómo trabajar con valores dinámicos dentro de una lista de Angular. Acá yo estoy trabajando en una aplicación, estoy trabajando en el componente principal de ella, y tengo una variable llamada'libros' en la cual tengo un'array' donde he poblado 10 diferentes objetos, cada uno con la información de un libro distinto. También en la plantilla correspondiente a este componente estoy trabajando con la directiva'ngFor' para desplegar, en este caso, el título correspondiente a este libro. El resultado de esta aplicación lo podemos ver acá en el navegador. Vemos cómo se está desplegando el título de cada uno de los libros que tengo almacenados en mi aplicación. Ahora vamos a modificar un poco el código y lo que vamos a hacer, por ahora voy a cerrar acá el código de mi aplicación y voy a trabajar únicamente en la plantilla. ¿Qué pasa si, por ejemplo, yo necesito trabajar con un valor estático, un valor específico de cada uno de estos elementos? Por ejemplo, si quisiera trabajar con enlace a Google, en todos los casos por cada uno los ítems que se encuentre en esta lista yo tendría un enlace exactamente al mismo lugar. Ahora, por ejemplo, si yo quisiera trabajar con un valor que busque específicamente el título de este autor, la forma en que podemos trabajarlo sería, en este caso, utilizando este parámetro, que es'gato'o'michi', o'hashtag', como lo digan en tu país, 'Q', donde vamos a asignar un valor dinámico. Y yo voy a copiar en este caso el valor que se encuentra dentro de esta expresión. Y en vez de poner 'libro. título', voy a poner'libro. autor', que es donde se encuentra el nombre del autor de este libro. Ahora, al hacer clic sobre este enlace me sale el resultado. Me va a enviar a la página de Google donde aparece el registro del autor correspondiente. Esto es una forma básica en que nosotros podemos trabajar, por ejemplo, cada uno de los ítems que se encuentran en nuestra aplicación. Y lo podemos trabajar con la información correspondiente a cada uno. Pero, por ejemplo, si nosotros estamos trabajando... Voy a borrar acá la propiedad'href' y en este caso voy a habilitar elemento'clic'y voy a hacer que cuando hagamos clic sobre cada uno de estos elementos nos envíe a una función, en este caso una función que se llamara'mostrar autor'. Ahora, también tenemos el mismo problema. Si yo pongo este evento dentro de cada uno de los ítems que están en mi lista, cada vez que el usuario haga clic sobre este enlace me va a llamar una función, pero siempre va a enviar el mismo valor. Vamos a ver cómo se ve esto dentro de la aplicación. Y yo voy a modificar el archivo'app. component. ts', que es donde se encuentra el código fuente de este componente y voy a agregar el método'mostrar autor'. Y en este caso lo que voy a hacer es que voy a mostrar una alerta. En este caso voy a trabajar también la sintaxis de JavaScript para desplegar. Lo que quiero que notes es que estoy utilizando las comillas especiales de JavaScript para trabajar con texto y para poder hacer una interpolación de cadenas de texto. En este caso vamos a poner: "este libro fue escrito por su autor". Guardamos y tenemos un resultado que, en este momento, te puede sonar muy obvio, pero cada vez que hagamos clic me va a mostrar la información. Y aunque me está llamando una instancia diferente de este método, siempre me va a mostrar la misma información. Para modificar estos valores, tenemos que inyectar el elemento dinámico y en este caso la instancia de nuestro libro. Así que aunque nosotros tenemos acceso desde el código a la lista completa de libros, para saber específicamente qué libro hemos hecho clic voy a tomar acá el objeto 'libro'. Acá se encuentra toda la información relacionada con cada uno de los libros. Como vemos, el Id, el título, el autor. Así que voy a venir acá, a esta alerta, y voy a modificarlo. Así que vamos a poner que en vez de poner directamente un valor estático vamos a poner un valor dinámico. Así que voy a utilizar esta sintaxis que me permite a mí dentro de TypeScript o dentro de JavaScript en sus últimas versiones utilizar directamente un valor. Así que voy a poner que el valor de'libro'–y en este caso también lo voy a definir acá–, que el valor de'libro'–yo estoy poniendo antes un guión bajo simplemente para que lo podamos distinguir de cualquier otro valor que se encuentre dentro de este componente–, así que vamos a poner que el libro "fue escrito por" y vamos a cambiar acá. Ponemos exactamente la misma sintaxis: signo dólar y llaves. Y ponemos que el libro "fue escrito por". También, en este caso, los valores que se encuentran en el libro. Ahora llamamos la propiedad específica y ponemos que 'título fue escrito por 'libro', punto 'autor'. Ahora sí nos va a dar la información que estamos inyectando dentro de cada uno de los diferentes elementos de la lista. Y vamos a ver el resultado final. Vemos como estamos desplegando información dinámica dentro de cada uno de los elementos de la lista. Así nosotros vamos a poder trabajar las listas de manera encapsulada con su información y aunque llamen diferentes métodos dentro de nuestras aplicaciones vamos a poder inyectar específicamente el dato relativo a nuestra lista y poder desplegar información o realizar tareas específicas relacionadas con los datos que se encuentren en ese ítem.

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.