Angular 2 Visualización de Datos

En este capítulo vamos a presentar cómo mostrar datos en la interfaz de usuario; se pueden usar las siguientes tres formas:

  • Mostrar las propiedades del componente mediante expresiones de interpolación
  • Mostrar propiedades de tipo array mediante NgFor
  • Mostrar según condiciones mediante NgIf

Mostrar las propiedades del componente mediante expresiones de interpolación

Para mostrar las propiedades del componente, la interpolación es la forma más sencilla, con el formato:{{nombreDePropiedad}}。

El siguiente código se basa enConfiguración del entorno de Angular 2 TypeScriptSe crea de acuerdo con esto. Puedes descargar el código fuente en ese capítulo y modificar los archivos mencionados a continuación.

Archivo app/app.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Mis sitios web favoritos:{{mySite}}</h2> ` }) export class AppComponent { title = 'Lista de sitios'; mySite = 'Ejemplo'; }

Angular extrae automáticamente los valores de las propiedades `title` y `mySite` del componente y los muestra en el navegador. La información mostrada es la siguiente:

Nota:La plantilla es una cadena de varias líneas encerrada entre comillas invertidas (`), no comillas simples (').

Usar ngFor para mostrar propiedades de array

También podemos recorrer y mostrar varios sitios. Modifica los siguientes archivos:

Archivo app/app.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Mis sitios web favoritos:{{mySite}}</h2> <p>Lista de sitios:</p> <ul> <li *ngFor="let site of sites"> {{ site }} </li> </ul> ` }) export class AppComponent { title = 'Lista de sitios'; sites = ['Ejemplo', 'Google', 'Taobao', 'Facebook']; mySite = this.sites[0]; }

En el código, usamos la directiva `ngFor` de Angular en la plantilla para mostrar cada elemento de la lista `sites`. No olvides el asterisco inicial (*) en `*ngFor`.

Después de la modificación, el navegador muestra lo siguiente:

En el ejemplo, `ngFor` recorre un array; de hecho, `ngFor` puede iterar sobre cualquier objeto iterable.

A continuación, creamos el archivo `site.ts` en el directorio `app`. El código es el siguiente:

Archivo app/site.ts:

export class Site { constructor( public id: number, public name: string) { } }

En el código anterior se define una clase con un constructor y dos propiedades: `id` y `name`.

A continuación, recorremos y mostramos la propiedad `name` de la clase `Site`:

Archivo app/app.component.ts:

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Mis sitios web favoritos:{{mySite.name}}</h2> <p>Lista de sitios:</p> <ul> <li *ngFor="let site of sites"> {{ site.name }} </li> </ul> ` }) export class AppComponent { title = 'Lista de sitios'; sites = [ new Site(1, 'Ejemplo'), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook') ]; mySite = this.sites[0]; }

Después de la modificación, el navegador muestra lo siguiente:

Mostrado condicional mediante NgIf

Podemos usar `NgIf` para mostrar datos que cumplan una condición específica.

En el siguiente ejemplo, si determinamos que hay más de 3 sitios web, mostramos un mensaje. Modifica el archivo `app.component.ts` de la siguiente manera, con el código:

Archivo app/app.component.ts:

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Mis sitios web favoritos:{{mySite.name}}</h2> <p>Lista de sitios:</p> <ul> <li *ngFor="let site of sites"> {{ site.name }} </li> </ul> <p *ngIf="sites.length > 3">¡Tienes muchos sitios web favoritos!</p> ` }) export class AppComponent { title = 'Lista de sitios'; sites = [ new Site(1, 'Ejemplo'), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook') ]; mySite = this.sites[0]; }

Después de la modificación, el navegador muestra lo siguiente; en la parte inferior aparece un mensaje adicional:

Otras extensiones