*ngFor para arrays
Contenido del curso
*ngFor para arrays
Contenido del curso
Rony Porraz Vargas
El array del profe
products = [ { name: 'EL mejor juguete', price: 565, image: './assets/images/toy.jpg', category: 'all', }, { name: 'Bicicleta casi nueva', price: 356, image: './assets/images/bike.jpg' }, { name: 'Colleción de albumnes', price: 34, image: './assets/images/album.jpg' }, { name: 'Mis libros', price: 23, image: './assets/images/books.jpg' }, { name: 'Casa para perro', price: 34, image: './assets/images/house.jpg' }, { name: 'Gafas', price: 3434, image: './assets/images/glasses.jpg' } ]
Osnayder Severiche Urda
Gracias!
Aaron Paredes Cabrera
Perfecto para ya no tipearlo
Juan Enrique Rodriguez Garcia
Aquí dejo el array de productos con las imágenes por url, así no hay que descárgalas ni nada, más rápido
products = [ { name: 'EL mejor juguete', price: 565, image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/toy.jpg', category: 'all', }, { name: 'Bicicleta casi nueva', price: 356, image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/bike.jpg' }, { name: 'Colleción de albumnes', price: 34, image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/album.jpg' }, { name: 'Mis libros', price: 23, image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/books.jpg' }, { name: 'Casa para perro', price: 34, image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/house.jpg' }, { name: 'Gafas', price: 3434, image: 'https://raw.githubusercontent.com/platzi/angular-fundamentals/10-step/src/assets/images/glasses.jpg' } ]
Daniel Felipe Valenzuela Lopez
Gracias crack
Camilla Bachna
Las imágenes de Nicolas
Luis Alberto Burgos Vilca
aquí está el proyecto:
marcos rodriguez
descargue las imagenes y las movi a la carpeta images como dijo el profesor pero no me las corre en el navegador, alguien sabe que puede ser?
Juan ibañez
Tambien puedes iterar objetos no solo arrays
products = {nombre:'juanito',edad:20} <div> <div *ngFor="let item of products | keyvalue "> {{item.key}}:{{item.value}} </div> </div>
José Eras
Si, usando el pipe keyvalue efectivamente se puede, pero si no usamos dicho pipe, dará error.
Joel Sánchez Ramírez
para que usen imágenes random y no estén descargando (al final ahorita no importa tanto las imágenes
Danna Valentina Hernández Pinilla
Gracias! Gran aporte!
Víctor Vásquez
Consulta, porque al usar este enlace como atributo "image" del objeto product, me sale 1 misma imagen para todos los productos y no una aleatoria para cada uno? 
Hermes Aguilar
Interfaces de typescript Una interfaz es un modelo que nos indica los atributos de un objeto.
Estefanys Esther Berdugo Fontalvo
rl){kind=small}
Andres López
Cuál es la diferencia entre tipar un array con una interfaz y tiparlo con literal types y alias como en este código:
type Product = { title: string, createdAt: Date, stock: number, } const products: Product[] = [];
David Higuera
La principal diferencia que conozco es que las interfaces pueden extender, omitir, tomar solo ciertas propiedades, etc. Mientras que el tipado literal es estático y limita a solo lo que se declara en ellos
Jully Evangelina Flórez Fonseca
Yo realice mi ejercicio con elementos de papeleria y coloque la imagen mas pequeña :)
Japheth Calzada López
No hay permisos para bajar las imagenes, por fa anteriormente agregaban una pestaña de recursos y ahi compartian los archivos o si lo van a ser por git que sea publico
Guadalupe Giovanni Hernández Medina
Se encuentran en el repo de Github, en la sección de recursos, ahí esta el URL. https://github.com/platzi/angular-fundamentals/tree/10-step/src/assets/images
Jimmy Buriticá Londoño
Enero-2022. Desde GitHub se pueden bajar las imágenes sin ningún problema.
marcos rodriguez
porque no me lee las imagenes? hice lo mismo que hizo el profe
José Samuel Aguilar Morales
Cuando hice el ejercicio, tenía corriendo el servidor, puse las imágenes y no me las mostraba, tuve que parar el servidor y volverlo a iniciar para que cargar lo que había en assets.
Raúl Méndez Santos
Por algún motivo a mi no me carga las imágenes. He parado varias veces el servidor, he cambiado formato y nada.
helmut martinez
X2
Juan Pablo Meza Gazabón
Buenas, considero que el nombre de la clase debe ser "*ngFor para arrays de objetos" jeje, porque en clase anterior, ya se explicó el tema con un array.
Brandon Lee Aguero Fernandez
Confirmo, aunque ya no creo que lo corrijan.
German Pinilla
++ngFor para arrays++
Ya vimos como iterar valores primitivos como strings, numbers, booleans. Pero ahora veremos como iterar array con una structura mas compleja, como lo son los arrays de objetos.
++Pasos++
1 - Primero debemos tener un array de objetos. Yo usare uno de estudiantes:
students = [ { firstName: 'German', lastName: 'Pinilla', age: 28, isStudent: true, image: '../assets/img/img01.jpg', category: '', }, { firstName: 'Andres', lastName: 'Rios', age: 30, isStudent: true, image: '../assets/img/img02.jpg', }, { firstName: 'Carlos', lastName: 'Diaz', age: 26, isStudent: false, image: '../assets/img/img03.jpg', }, { firstName: 'Ricardo', lastName: 'Rodriguez', age: 26, isStudent: true, image: '../assets/img/img02.jpg', }, { firstName: 'Luis', lastName: 'Garcia', age: 29, isStudent: false, image: '../assets/img/img03.jpg', }, { firstName: 'Adriana', lastName: 'Smith', age: 29, isStudent: true, image: '../assets/img/img04.jpg', }, ];
Este array contiene por cada posicion en el array, un elemento de tipo objeto, que a su ves contiene unas propiedades (firstName, lastName, age, etc)
2 - Podemos iterar este array de objetos y obtener cada unas de sus propiedades
<div> <!-- Iteramos el array students y definimos para cade elemento la variable student --> <div *ngFor="let student of students"> <!-- Cada elemento student contiene las propiedades del objeto por lo que podemos istanciarlas con punto elmento.propiedad --> <!-- student.image contiene la url de la imagen --> <img [src]="student?.image" width="200" style="border-radius: 50%;" alt="image"> <br> <label>Nombre: </label> <span> <!-- student.firstName contiene el nombre del estudiante y student.lastName contiene el apellido del estudiante --> {{ student?.firstName + ' ' + student.lastName }} </span> <br> <label>Edad: </label> <!-- student.age contiene la edad del estudiante --> <span>{{ student?.age }}</span> <br> <label>Es estudiante?: </label> <!-- student.isStudent contiene la validacion booleana si el usuario es estudiante o no --> <span>{{ student?.isStudent ? 'Si es estudiante' : 'No es estudiante' }}</span> <hr> </div> </div>
3 - Una forma mas deductiva de conocer las propiedades del array de objetos, es definiendo una interface donde se declaran cada una de sus propiedades y el tipo de dato que contendra
Nota: Puedo definir la interface en mi propio componente pero es recomendable hacerlo en un archivo independiente (Como lo hizo el profe), si lo defino el mismo app.component.ts no es necesario usar export, de otra forma si debo usarlo para luego imporatala interface en los lugares que lo desee.
export interface Student { firstName: string; lastName: string; age: number; isStudent: boolean; image: string; category?: string; }
Una vez tenemos a interface en un archivo independiente la importamos en nuestro componente y definimos el array de objetos students de tipo student heredando las propiedades de la interface.
import { Component } from '@angular/core'; import { Student } from './student.model'; // <--- Aqui impotamos la interface @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { // Defnimos el array de objetos del tipo Student[] students: Student[] = [ { firstName: 'German', lastName: 'Pinilla', age: 28, isStudent: true, image: '../assets/img/img01.jpg', category: '', }, { firstName: 'Andres', lastName: 'Rios', age: 30, isStudent: true, image: '../assets/img/img02.jpg', }, { firstName: 'Carlos', lastName: 'Diaz', age: 26, isStudent: false, image: '../assets/img/img03.jpg', }, { firstName: 'Ricardo', lastName: 'Rodriguez', age: 26, isStudent: true, image: '../assets/img/img02.jpg', }, { firstName: 'Luis', lastName: 'Garcia', age: 29, isStudent: false, image: '../assets/img/img03.jpg', }, { firstName: 'Adriana', lastName: 'Smith', age: 29, isStudent: true, image: '../assets/img/img04.jpg', }, ]; }
Aca la respuesta en el navegador:
Julieth Viviana Cobos Guerrero
En Angular 18 ya no se usa Assets sino la carpeta Public.
Cristian Damaso Calderon Rojas
Hola, para las personas que están viendo el curso: a pesar de que está desactualizado y no les muestre la imagen como lo está haciendo @NicolasMolina, en una nueva actualización que consulté con una IA, cambiaron la ubicación de las imágenes para alinearse con lo que hacen los demás frameworks (recuerdo haberlo visto en React con Vite).
En resumen, muevan la carpeta images a la carpeta public y en el objeto cambien la ruta a /images/...
También pueden personalizar la ubicación de la carpeta de archivos: Angular tiene su archivo de configuración angular.json, donde encontrarán que assets —que es la propiedad que corresponde a los archivos multimedia (correctamente dicho archivos ESTATICOS)— tiene el input configurado apuntando a la carpeta public.
David Andrés Rincón Suárez
Para Angular 21.2, la estructura HTML para los for con objetos, es:
Andrés Rodríguez
Hola! No me queda claro en que casos tengo que usar una interfaz y en que caso usar un joi, o son lo mismo?
JUAN MIGUEL PIEDRAHITA MONROY
Pordiamos saber las extensiones que utliza el profesor Nicolas,
Gracias
Pablo César Silva Espinoza
Yo pude identificar algunas por su interfaz:
Te recomiendo este articulo de Platzi: https://platzi.com/blog/10-plugins-esenciales-para-vscode/
Juan David Varón
¡Hola! ¿Se crea un archivo por cada interfaz o sería mala práctica en un mismo archivo colocar todas las interfaces? Y otra pregunta, ¿es mejor utilizar interfaces o simplemente tipar el array? 😄
