Читать книгу Angular - Manfred Steyer - Страница 62

Direktiven

Wie bereits erwähnt, fügen Direktiven der Seite Verhalten hinzu. Dieses kann die Datenbindung unterstützen. Ein Beispiel dafür ist die Direktive ngFor, die eine Auflistung iteriert und pro Eintrag ein Stück HTML rendert (siehe Beispiel 3-9).

Beispiel 3-9: Flight-Array mit ngFor iterieren

<td>{{flight.id}}</td>

<td>{{flight.from}}</td>

<td>{{flight.to}}</td>

<td>{{flight.date}}</td>

</tr>

</table>

Im hier betrachteten Fall durchläuft ngFor sämtliche Flüge des Arrays flights aus der Komponente des vorherigen Abschnitts. Pro Flug rendert sie eine Tabellenzeile. Bitte beachten Sie, dass in Anlehnung an die for-of-Schleife in ECMAScript auch hier im Rahmen der Datenbindung das Schlüsselwort of zu verwenden ist.

Der vorangestellte Stern (*ngFor) gibt darüber Auskunft, dass es sich beim Inhalt des aktuellen Elements um ein sogenanntes Template handelt. Damit sind hier HTML-Fragmente gemeint, die Angular zunächst gar nicht rendert und bei Bedarf einmal oder mehrere Male in die Seite einfügt.

Eine weitere Direktive, die sich hier anbietet, ist ngClass. Sie weist dem aktuellen Element zur bedingten Formatierung entsprechende Styles zu (siehe Beispiel 3-10).

Beispiel 3-10: Bedingte Formatierung mit ngClass

<tr *ngFor="let flight of flights"

[ngClass]="{ 'active': flight === selectedFlight }">

[...]

</tr>

</table>

Somit erhält die Tabellenzeile mit dem gerade ausgewählten Flug die Klasse active. Dieser Style kann in der Datei flight-search.component.scss definiert werden:

.active {

background-color:darkorange

}

In diesem Fall gilt der Style nur für die FlightSearchComponent. Um ihn global zur Verfügung zu stellen, ist er in die Datei src/styles.scss einzutragen.

Einen Überblick über weitere häufig verwendete Direktiven samt Alternativen dazu finden Sie in Tabelle 3-2.

Tabelle 3-2: Häufig verwendete Direktiven

Beispiel	Beschreibung
<tr *ngFor="let flight of flights">  <td>{{flight.id}}</td> </tr>	Iteriert über alle Flüge im Array flights und gibt pro Flug die ID aus.
<table *ngIf="flights.length > 0"> ... </table>	Blendet das Element ein, wenn der übergebene Ausdruck wahr (true bzw. truthy) ist.
<table *ngIf="flights.length > 0; else noFlights"> ... </table> <template #noFlights>Keine Flüge gefunden </template>	Das Schlüsselwort else verweist dazu auf den Namen eines Templates, das eingeblendet wird, wenn die Bedingung nicht erfüllt ist. Der Name des Templates wird mit einer Raute (#) als Präfix definiert. Diese Raute kommt jedoch nur bei der Deklaration des Namens und nicht bei dessen Verwendung zum Einsatz.
<tr [ngClass]="{ 'active': flight === selectedFlight }"> ... </tr>	Weist die Klasse active zu, wenn der Ausdruck flight === selectedFlight wahr (true bzw. truthy) ist.
<tr [ngStyle]="{ 'background-color': bg}"> ... </tr>	Setzt die CSS-Eigenschaft background-color auf den Wert der Variablen bg.
<tr [ngStyle]="{ 'background-color': (flight === selectedFlight) ? 'orange' : 'blue' }"> ... </tr>	Setzt die CSS-Eigenschaft background-color auf orange, wenn der Ausdruck flight === selectedFlight wahr (true) ist; ansonsten kommt der Wert blue zum Einsatz. Hierzu verwendet das Binding den aus JavaScript und anderen C-ähnlichen Sprachen bekannten ternären Operator.
<tr [class.active]="flight === selectedFlight"> ... </tr>	Weist den Wert active zum Attribut class zu, wenn der übergebene Ausdruck wahr (true) ist. Bei dieser Kurzschreibweise werden der Attributname und der eventuell zuzuweisende Wert durch einen Punkt getrennt.
<input [(ngModel)]="to" name="to">	Bindet die Eigenschaft to aus der Komponente mittels Two-Way-Binding an das Eingabefeld. Kommt das input-Element innerhalb eines form-Elements (<form>...</form>) zum Einsatz, erzwingt Angular das Vergeben eines Namens.

Подняться наверх