Mostrando un array asociativo con NgFor en Angular 2

Publicado en Abr 25, 2016

Vamos a definir una propieda cuyo valor será array en nuestro componente de Angular 2, automaticamente
ya tenemos disponible esa propiedad en la plantilla. Para mostrar los datos del array tenemos que
recorrer el array con un bucle y en Angular existe la directiva ngFor que nos va a permitir hacer
esto.

Veamos como mostrar un array asociativo con NgFor en Angular 2

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<h1>Peliculas en Angular 2:</h1>\n\

               <h3>Primera pelicula harcodeada:</h3>
               <p>Pelicula: {{peliculas[0]["pelicula"]}}</p>
               <p>Director: {{peliculas[0]["director"]}}</p>
               <p>Año: {{peliculas[0]["anio"]}}</p>\n\

               <h3>Listado de peliculas:</h3>
			   
	      <!-- Utilizamos ngFor para recorrer el array -->
               <ul>
                <li *ngFor="#peli of peliculas">
                  <p>Titulo: {{peli["pelicula"]}}</p>
                  <p>Director: {{peli["director"]}}</p>
                  <p>Año: {{peli["anio"]}}</p>
                </li>
               </ul>
    `,
})
export class AppComponent {
	// Definimos el array
    peliculas = [
        {
            "pelicula": "Batman v. Superman",
            "director": "Zack Snider",
            "anio": "2016"
        },
        {
            "pelicula": "La verdad duele",
            "director": "Will Smith",
            "anio": "2015"
        },
        {
            "pelicula": "Una historia real",
            "director": "Desconocido",
            "anio": "2014"
        }];
}

Con esto ya sabemos usar la directiva ngFor.

Actualización para Angular 2 RC

En la nueva versión de Angular 2 han cambiado dos pequeños detalles del código de este ejemplo.
A la hora de hacer el import, se hace así:

import {Component} from '@angular/core';

A la hora de hacer el bucle for en la plantilla, han cambiado la forma de utilizar la directiva y se hace así:

<!-- Utilizamos ngFor para recorrer el array -->
               <ul>
                <li *ngFor="let peli of peliculas">
                  <p>Titulo: {{peli["pelicula"]}}</p>
                  <p>Director: {{peli["director"]}}</p>
                  <p>Año: {{peli["anio"]}}</p>
                </li>
               </ul>

Esto es todo, te espero en los siguientes capítulos y en el curso de Angular 2.