Читать книгу Angular - Ferdinand Malcher - Страница 167

In Angular wird eine strenge Namenskonvention verfolgt. Es werden grundsätzlich zwei verschiedene Formate genutzt:

 dashed-case: Diese Konvention wird für Dateinamen und Selektoren genutzt. Eine alternative Bezeichnung ist kebab-case.

 CamelCase: Die CamelCase-Konvention wird für die Namensgebung von Klassen und Interfaces verwendet.

Entsprechend der Zielsetzung der ersten 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>