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

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.'

}

];

}

}