Angular: 6. Directiva estructural *ngFor

La directiva *ngFor se utiliza para repetir un elemento por cada entrada que tenga una variable de tipo array que le asociemos.

Vamos a modificar en nuestra página una lista de elementos para que dependa de una lista que le pasaremos por JavaScript.

Primero modificamos la clase "BodyComponent" y le añadimos una propiedad de tipo array de strings con 3 elementos, por ejemplo, a la que llamaremos "personajes":

Después modificamos el "body.component.html".
Creamos una lista "<ul>" a la que sólo añadimos un elemento "<li>". A éste elemento le añadimos la directiva "*ngFor" con el siguiente contenido: "let personaje of personajes; let i = index".
Con "let personaje of personajes" estamos creando una variable "personaje" que va a ser igual a la propiedad "personajes" que creamos en la clase "BodyComponent".
Con "let i = index" estamos creando una variable que va a ser igual al índice de cada elemento. Esto es, simplemente va a ir contando los elementos para mostrar el número.
Finalmente, para el contenido del elemento, colocamos el código "{{ i + 1 }} - {{ personaje }}".
Con éste código estamos mostrando el número del elemento + 1 (para que los elementos empiecen por el número 1, ya que los índices por defecto empiezan en 0), concatenamos un guión y mostramos el personaje correspondiente:

Entramos en la página y comprobamos que la lista se muestra correctamente:

Y eso es todo.