Affichage des données Angular 2

Dans ce chapitre, nous allons présenter comment afficher des données sur l'interface utilisateur. Vous pouvez utiliser les trois méthodes suivantes :

  • Afficher les propriétés d'un composant via interpolation
  • Afficher les propriétés d'un tableau via NgFor
  • Affichage conditionnel via NgIf

Affichage des propriétés d'un composant avec interpolation

Pour afficher une propriété d'un composant, l'interpolation est la méthode la plus simple. Le format est :{{propertyName}}。

Le code suivant est basé surla configuration de l'environnement Angular 2 TypeScriptpour créer. Vous pouvez télécharger le code source dans ce chapitre et modifier les fichiers mentionnés ci-dessous.

fichier app/app.component.ts :

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Mes sites Web préférés :{{mySite}}</h2> ` }) export class AppComponent { title = 'Liste de sites'; mySite = 'Exemple'; }

Angular extraira automatiquement les valeurs des propriétés title et mySite du composant et les affichera dans le navigateur. Les informations affichées sont les suivantes :

Remarque :Le template est une chaîne multi-ligne entourée de backticks (`), pas de guillemets simples (').

Utilisation de ngFor pour afficher les propriétés de tableau

Nous pouvons également parcourir plusieurs sites. Modifiez le fichier suivant :

fichier app/app.component.ts :

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Mes sites web préférés :{{mySite}}</h2> <p>Liste de sites :</p> <ul> <li *ngFor="let site of sites"> {{ site }} </li> </ul> ` }) export class AppComponent { title = 'Liste de sites'; sites = ['Exemple', 'Google', 'Taobao', 'Facebook']; mySite = this.sites[0]; }

Dans le code, nous utilisons la directive ngFor d'Angular dans le template pour afficher chaque entrée de la liste sites. N'oubliez pas l'astérisque (*) initial dans *ngFor.

Après modification, le navigateur affiche ce qui suit :

Dans l'exemple, ngFor parcourt un tableau. En fait, ngFor peut itérer sur n'importe quel objet itérable.

Ensuite, nous créons un fichier site.ts dans le répertoire app. Le code est le suivant :

Fichier app/site.ts :

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

Le code ci-dessus définit une classe avec un constructeur et deux propriétés : id et name.

Ensuite, nous parcourons et affichons la propriété name de la classe Site :

fichier app/app.component.ts :

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Mes sites Web préférés :{{mySite.name}}</h2> <p>Liste de sites Web :p> <ul> <li *ngFor="let site of sites"> {{ site.name }} </li> </ul> ` }) export class AppComponent { title = 'Liste de sites'; sites = [ new Site(1, 'Exemple'), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook') ]; mySite = this.sites[0]; }

Après modification, le navigateur affiche ce qui suit :

Affichage conditionnel avec NgIf

Nous pouvons utiliser NgIf pour afficher conditionnellement des données.

Dans l'exemple suivant, nous vérifions si le nombre de sites Web est supérieur à 3, et affichons un message d'invite : Modifiez le fichier app.component.ts suivant. Le code est le suivant :

fichier app/app.component.ts :

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Mes sites Web préférés :{{mySite.name}}</h2> <p>Liste de sites Web :p> <ul> <li *ngFor="let site of sites"> {{ site.name }} </li> </ul> <p *ngIf="sites.length > 3">Vous avez de nombreux sites Web favoris !</p> ` }) export class AppComponent { title = 'Liste de sites'; sites = [ new Site(1, 'Exemple'), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook') ]; mySite = this.sites[0]; }

Après modification, le navigateur s'affiche comme suit, avec un message d'invite supplémentaire en bas :

Autres extensions