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

Template für die Detailansicht

Das zugehörige Template stellt die Buchinfos ansprechend dar. Die Thumbnails werden am unteren Seitenrand klein dargestellt. Die Liste der Autoren und Thumbnails durchlaufen wir mit der Direktive ngFor, ebenso das generierte Array für die Sternanzeige. Bei der Autorenliste verwenden wir das besondere Containerelement <ng-container>, siehe Kasten auf Seite 126. Außerdem integrieren wir einen Button, der die Methode showBookList() auslöst und damit zur Listenansicht wechselt.

<div *ngIf="book">

<h1>{{ book.title }}</h1>

<h3 *ngIf="book.subtitle">{{ book.subtitle }}</h3>

<div class="ui divider"></div>

<div class="ui grid">

<div class="four wide column">

<h4>Autoren</h4>

<ng-container *ngFor="let author of book.authors">

{{ author }}<br>

</ng-container>

</div>

<div class="four wide column">

<h4>ISBN</h4>

{{ book.isbn }}

</div>

<div class="four wide column">

<h4>Erschienen</h4>

{{ book.published }}

</div>

<div class="four wide column">

<h4>Rating</h4>

<i class="yellow star icon"

*ngFor="let r of getRating(book.rating)"></i>

</div>

</div>

<h4>Beschreibung</h4>

<p>{{ book.description }}</p>

<div class="ui small images">

<img *ngFor="let thumbnail of book.thumbnails"

[src]="thumbnail.url">

</div>

<button class="ui red button"

(click)="showBookList()">

Zurück zur Buchliste

</button>

</div>