Aufgabe 1, Component
In dieser Aufgabe lernst du die Anwendung von Input, Output, ngFor, ngIf.
Wir zeigen Fussballspiele an mit Resultat.
Projekt erstellen
Erstelle auf der Kommandozeilen ein neues leeres Angular projekt mit den folgenden Vorgaben:
- style SCSS
- ohne tests
- ohne git
Info
welche Parameter brauchst du dafür beim ng new Befehl?
Projekt Vorbereiten
Um im Projekt mit Daten arbeiten zu können, lege jetzt eine Datei data.ts im Folder app an:
Kopiere folgenden inhalt in diese Datei:
data.ts
export class GoalInfo {
time!: string;
player!: string;
special?: string;
scoreA!: number;
scoreB!: number;
}
export class MatchInfo {
id?: number;
matchNo?: number;
teamA? : string;
teamB? : string;
readonly goals: GoalInfo[] = []
state!: 'coming' | 'running' | 'finished';
}
export const matchInfos: MatchInfo[] = [
{
id: 1,
matchNo: 1,
teamA: 'Manchester City',
teamB: 'Real Madrid',
goals: [
{
time: '14:33',
player: 'a player name',
special: undefined,
scoreA: 1,
scoreB: 0,
},
{
time: '48:04',
player: 'another player name',
special: 'penalty',
scoreA: 1,
scoreB: 1,
},
],
state:'finished',
},
{
id: 123,
matchNo: 2,
teamA: 'Real Madrid',
teamB: 'Manchester City',
goals: [
{
time: '12:33',
player: 'a player name',
special: undefined,
scoreA: 1,
scoreB: 0,
},
{
time: '75:04',
player: 'another player name',
special: 'penalty',
scoreA: 1,
scoreB: 1,
},
{
time: '93:53',
player: 'a player name',
special: undefined,
scoreA: 1,
scoreB: 2,
},
],
state:'running',
},
{
id: 153,
matchNo: 22,
teamA: 'Real Madrid',
teamB: 'Manchester United',
goals: [],
state:'coming',
}
];
Anzeige 1 (mit html tabelle)
Erstelle jetzt eine Liste der Spiele welche wie folgt aussieht:
Verwende dazu eine HTML Tabelle
- SpielNummer, Teams und aktuelles Resultat
- 1 Manchester City Real Madrid 1 1
- 2 Real Madrid Manchester City 1 1
Erstelle dazu folgende Components und zeige sie an
- TableMatches
Ersetzte den Inhalt der Datei app.component.htnl mit dem folgenden text
Dein Resultat sollte so aussehen:
Anzeige 2 (mit div statt table)
In diesem Teil wechseln wir von Tabelle auf eine "div" anzeige.
Erweitere deine Liste mit folgenden Komponenten:
- ListHeaderMatches
- ListItemMatch (also die Anzeige für ein Spiel)
- ResultItemMatch (nur das Resultat z.b. 1 : 1)
Ersetzte den Inhalt der Datei app.component.html mit dem folgenden text