Angular 2 Datenanzeige

In diesem Kapitel stellen wir vor, wie Daten auf der Benutzeroberfläche angezeigt werden. Sie können die folgenden drei Methoden verwenden:

  • Komponenteneigenschaften über Interpolation anzeigen
  • Array-Eigenschaften über NgFor anzeigen
  • Bedingte Anzeige über NgIf

Anzeigen von Komponenteneigenschaften mit Interpolation

Um die Eigenschaft einer Komponente anzuzeigen, ist Interpolation der einfachste Weg. Das Format lautet:{{propertyName}}。

Der folgende Code basiert aufAngular 2 TypeScript-Umgebungskonfigurationund wurde erstellt. Sie können den Quellcode in diesem Kapitel herunterladen und die unten genannten Dateien ändern.

app/app.component.ts-Datei:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>My favorite websites:{{mySite}}</h2> ` }) export class AppComponent { title = 'Site list'; mySite = 'Example'; }

Angular extrahiert automatisch die Werte der title- und mySite-Eigenschaften aus der Komponente und zeigt sie im Browser an. Die angezeigten Informationen sind wie folgt:

Hinweis:Die Vorlage ist eine mehrzeilige Zeichenfolge, die in Backticks (`) eingeschlossen ist, nicht in einfache Anführungszeichen (').

Verwendung von ngFor zum Anzeigen von Array-Eigenschaften

Wir können auch durch mehrere Websites iterieren. Ändern Sie die folgende Datei:

app/app.component.ts-Datei:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>My favorite websites:{{mySite}}</h2> <p>Website list:</p> <ul> <li *ngFor="let site of sites"> {{ site }} </li> </ul> ` }) export class AppComponent { title = 'Site-Liste'; sites = ['Beispiel', 'Google', 'Taobao', 'Facebook']; mySite = this.sites[0]; }

Im Code verwenden wir Angulars ngFor-Direktive im Template, um jeden Eintrag in der Site-Liste anzuzeigen. Vergessen Sie nicht das vorangestellte Sternchen (*) in *ngFor.

Nach der Änderung sieht die Anzeige im Browser wie folgt aus:

Im Beispiel durchläuft ngFor ein Array. Tatsächlich kann ngFor über jedes iterierbare Objekt iterieren.

Als Nächstes erstellen wir eine site.ts-Datei im app-Verzeichnis. Der Code sieht wie folgt aus:

app/site.ts-Datei:

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

Der obige Code definiert eine Klasse mit einem Konstruktor und zwei Eigenschaften: id und name.

Als Nächstes durchlaufen wir die Schleife und geben die name-Eigenschaft der Site-Klasse aus:

app/app.component.ts-Datei:

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

Nach der Änderung sieht die Anzeige im Browser wie folgt aus:

Bedingte Anzeige mit NgIf

Wir können NgIf verwenden, um Daten bedingt auszugeben.

Im folgenden Beispiel prüfen wir, ob die Anzahl der Websites größer als 3 ist, und geben eine Meldung aus: Modifizieren Sie die folgende app.component.ts-Datei. Der Code sieht wie folgt aus:

app/app.component.ts-Datei:

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>My favorite websites:{{mySite.name}}</h2> <p>Website list:</p> <ul> <li *ngFor="let site of sites"> {{ site.name }} </li> </ul> <p *ngIf="sites.length > 3">You have many favorite websites!</p> ` }) export class AppComponent { title = 'Site list'; sites = [ new Site(1, 'Beispiel'), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook') ]; mySite = this.sites[0]; }

Nach der Modifikation zeigt der Browser Folgendes an, mit einer zusätzlichen Meldung am unteren Rand:

Andere Erweiterungen