*ngFor para arrays

⚠️ 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.