Iteration soll die Komponente eine Listenansicht von Büchern darstellen. Hierzu passen wir zunächst das generierte Template an. Wir legen das Grundgerüst für die Liste an und greifen dafür auf die Elemente des Style-Frameworks Semantic UI zurück.
ngFor für die Buchliste
Schließlich verwenden wir die Direktive ngFor, um durch die Liste der Bücher zu iterieren. ngFor wiederholt in unserem Fall das Element <a class="item"> und dessen Inhalte für jedes Buch. In jedem dieser Blöcke werden der Titel, die Autoren und die ISBN des Buchs ausgegeben. Der Untertitel ist optional und wird mit der Direktive ngIf nur eingeblendet, sofern dieser angegeben wurde. Wir verwenden die Interpolation, um Propertys der Komponentenklasse im Template auszugeben.
Autoren anzeigen mit ngFor
Die Liste der Autoren soll kommasepariert angezeigt werden. Wir verwenden hier ebenfalls ngFor und durchlaufen die Liste der Autoren. Um nach dem letzten Element kein Komma anzuzeigen, machen wir uns die Hilfsvariablen der Direktive zunutze: Die Variable last ist true, sobald die Schleife das letzte Element des Arrays erreicht hat. Wir können diesen Wert in eine lokale Variable l speichern und damit feststellen, wann der letzte Name ausgegeben wurde. Das Komma platzieren wir in einem <span>-Element, das wir mit der Direktive ngIf einblenden oder ausblenden, je nachdem, ob der letzte Name erreicht wurde oder nicht. Solange der letzte Wert nicht erreicht wurde, wird also hinter jedem Autor ein Komma und ein Leerzeichen angefügt.
Thumbnails anzeigen
Außerdem wird das erste Bild aus der Liste der Thumbnails eingebunden. Dazu können wir direkt auf das Property src des Image-Elements zugreifen. Die Prüfung ist nötig, um das Element nur anzuzeigen, wenn auch wirklich ein Bild zum Buch hinterlegt ist.
<div class="ui middle aligned selection divided list">
<a *ngFor="let book of books" class="item">
<img class="ui tiny image"
*ngIf="book.thumbnails && book.thumbnails[0] && book. thumbnails[0].url"
[src]="book.thumbnails[0].url">
<div class="content">
<div class="header">{{ book.title }}</div>
<div *ngIf="book.subtitle" class="description">{{ book. subtitle }}</div>
<div class="metadata">
<span *ngFor="let author of book.authors; last as l">
{{ author }}<span *ngIf="!l">, </span>
</span>
<br>
ISBN {{ book.isbn }}
</div>
</div>
</a>
</div>
Listing 6–15 Das Template der BookListComponent (book-list.component.html)
Beispieldaten
Damit wir auch sofort ein paar Bücher in der Liste sehen können, initialisieren wir in der Komponente ein Array mit Beispielbüchern (Listing 6–16). Dadurch dass wir das Property book mit dem Interface Book typisiert haben, sehen wir direkt im Editor, welche Eigenschaften wir zuweisen müssen und welche optional sind. Sofern wir vergessen, eine der obligatorischen Eigenschaften zuzuweisen, wird der Compiler eine entsprechende Fehlermeldung anzeigen.
Wir wollen in diesem Fall alle Eigenschaften angeben (auch die optionalen), denn im Template der Listenansicht werden ja auch alle diese Werte verwendet. Das Interface Thumbnail müssen wir nicht separat importieren, denn die Eigenschaft thumbnails im Interface Book verweist bereits darauf. Somit zeigt uns der Editor auch direkt an, dass wir hier ein Array angeben können, das Objekte mit der Eigenschaft url und der optionalen Eigenschaft title erwartet.
import { Component, OnInit } from '@angular/core';
import { Book } from '../shared/book';
@Component({
selector: 'bm-book-list',
templateUrl: './book-list.component.html',
styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {
books: Book[];
ngOnInit(): void {
this.books = [
{
isbn: '9783864907791',
title: 'Angular',
authors: ['Ferdinand Malcher', 'Johannes Hoppe', 'Danny Koppenhagen'],
published: new Date(2020, 8, 1),
subtitle: 'Grundlagen, fortgeschrittene Themen und Best Practices',
rating: 5,
thumbnails: [{
url: 'https://ng-buch.de/angular-cover.jpg',
title: 'Buchcover'
}],
description: 'Lernen Sie Angular mit diesem Praxisbuch!'
},
{
isbn: '9783864905520',
title: 'React',
authors: ['Oliver Zeigermann', 'Nils Hartmann'],
published: new Date(2019, 11, 12),
subtitle: 'Grundlagen, fortgeschrittene Techniken und Praxistipps',
rating: 3,
thumbnails: [{
url: 'https://ng-buch.de/react-cover.jpg',
title: 'Buchcover'
}],
description: 'Das bewährte und umfassende Praxisbuch zu React.'
}
];
}
}
Listing 6–16 BookListComponent (book-list.component.ts)
ngOnInit()
