⚠️ En el código de la clase dice *ngFor Objs, y debería ser *ngFor para arrays.
Puedes utilizar *ngFor para iterar y mostrar cada propiedad de un objeto. Considera que en el componente tienes un array de objetos que representan a una persona:
Itera este array en el HTML e imprimimos el valor de cada propiedad de la siguiente manera:
<ul *ngFor="let person of peopleArray"><li>Nombre:{{ person.firstname}}</li><li>Apellido:{{ person.lastname}}</li><li>Edad:{{ person.age}}</li></ul>
La variable person guarda temporalmente el objeto en cada iteración, pudiendo acceder a cada valor usando un punto seguido del nombre de la propiedad.
Tipado de objetos con interfaces
El array peopleArray puede contener cualquier cosa, y puede ocasionar comportamientos indeseados en tu aplicación. Puedes crear una interfaz de Personas para tipar los objetos del array y asegurar que todos tengas las mismas propiedades.
interfacePerson{firstname: string;lastname: string;age: number
}
Tipando el array de la siguiente manera para indicar que el array es de objetos del tipo Persona:
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'}]
Gracias!
Perfecto para ya no tipearlo
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'}]
Gracias crack
Las imágenes de Nicolas
aquí está el proyecto:
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?
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>
Si, usando el pipe keyvalue efectivamente se puede, pero si no usamos dicho pipe, dará error.
para que usen imágenes random y no estén descargando (al final ahorita no importa tanto las imágenes
Gracias! Gran aporte!
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?

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
Enero-2022. Desde GitHub se pueden bajar las imágenes sin ningún problema.
porque no me lee las imagenes? hice lo mismo que hizo el profe
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.
Por algún motivo a mi no me carga las imágenes. He parado varias veces el servidor, he cambiado formato y nada.
X2
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.
Confirmo, aunque ya no creo que lo corrijan.
++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.
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']})exportclassAppComponent{// 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:
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.
Para Angular 21.2, la estructura HTML para los for con objetos, es:
Hola!
No me queda claro en que casos tengo que usar una interfaz y en que caso usar un joi, o son lo mismo?
Pordiamos saber las extensiones que utliza el profesor Nicolas,
¡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? 😄
Cuando se usa una interfaz y cuando una clase en Angular?