⚠️ 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:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
peopleArray = [
{
firstname: 'Freddy',
lastname: 'Vega',
age: 35
},
{
firstname: 'Nicolas',
lastname: 'Molina',
age: 29
},
{
firstname: 'Ángela',
lastname: 'Ocando',
age: 30
}
];
}
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.
interface Person {
firstname: string;
lastname: string;
age: number
}
Tipando el array de la siguiente manera para indicar que el array es de objetos del tipo Persona:
...
peopleArray: Person[] = [
{
firstname: 'Freddy',
lastname: 'Vega',
age: 35
},
...
]
Aporte creado por: Kevin Fiorentino.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?