Aufgabe 1, Component Lösung

Die Lösungen sollen dir helfen zu kontrollieren ob du zu einer ähnlichen Lösung gekommen bist

ng new [Projektname] --style scss --routing true --skip-tests true --skip-git true

toplevel css

wir haben den Header und das Item welches beide die gleichen column breiten brauchen. Warum nicht einfach ein geshartes css?

Info

list.scss

.row {
  display: flex;
  flex-direction: row;
}
.border {
  border: black solid 0.5px;
}
.col-no {
  width: 50px;
  text-align: right;
}
.col-team {
  width: 200px;
  text-align: center;
}
.col-result {
  width: 200px;
  text-align: center;
}
.col-state {
  width: 100%;
  text-align: left;
}
.col-no, .col-team, .col-result, .col-state {
  padding: 3px;
}

List Item Match Compoent

Lösung der Anzeige 2. Wir verwenden eine verschachteltet Ordner Struktur:

TableMatchComponent

table-matches.components.ts

import { Component } from '@angular/core';
import { GoalInfo, MatchInfo, matchInfos } from '../data';

@Component({
  selector: 'app-table-matches',
  templateUrl: 'table-matches.component.html',
  styleUrls: [ 'table-matches.component.scss']
})
export class TableMatchesComponent {

  // wir laden hier die Daten
  data: MatchInfo[] = matchInfos;

  /***
   * Wandelt das Array von Goalinformationen in einen String um
   *
   * @param result ist das Array von Goalinformationen
   * @Return ein String mit dem aktuellen Spielstand
   */
  getResult(result: GoalInfo[]): string {
    // check if we have any result, if not we have 0:0
    if (!result || result.length === 0){
      return '0 : 0';
    }
    // the last info has the final result...
    const last = result[ result.length - 1];
    return last.scoreA + ' : ' + last.scoreB;
  }
}

table-matches.component.scss

.table-title {
  border: black solid 0.5px;
  background-color: lightgray;
}
.even {
  background-color: lightblue;
}

.odd {
  background-color: blanchedalmond;
}

table-matches.component.html

<table>
  <tr class="table-title">
    <th>no</th>
    <th>team A</th>
    <th>team B</th>
    <th>result</th>
    <th>state</th>
  </tr>
  <tr *ngFor="let matchInfo of data; even as isEven; odd as isOdd" [class.even]="isEven" [class.odd]="isOdd">
    <td>{{ matchInfo.matchNo }}</td>
    <td>{{ matchInfo.teamA }}</td>
    <td>{{ matchInfo.teamB }}</td>
<!--    <td>{{ matchInfo.goals[matchInfo.goals.length - 1].scoreA || 0 }} : {{ matchInfo.goals[matchInfo.goals.length - 1].scoreB || 0 }}</td>-->
    <td>{{ getResult(matchInfo.goals) }}</td>
    <td>{{ matchInfo.state }}</td>
  </tr>
</table>

ListHeaderMatchesComponent

list-header-matches.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-list-header-matches',
  templateUrl: 'list-header-matches.component.html',
  styleUrls: ['list-header-matches.component.scss', '../list.scss']
})
export class ListHeaderMatchesComponent {
}

list-header-matches.component.scss

.title {
  background-color: lightgray;
  font-weight: bolder;
}

list-header-matches.component.html

<div class="title border row">
  <div class="border col-no">no</div>
  <div class="border col-team">team A</div>
  <div class="border col-team">team B</div>
  <div class="border col-result">result</div>
  <div class="border col-state">state</div>
</div>

ListItemMatchComponent

list-item-match.component.ts

import { Component } from '@angular/core';
import { MatchInfo, matchInfos } from '../../data';

@Component({
  selector: 'app-list-item-match',
  templateUrl: './list-item-match.component.html',
  styleUrls: ['./list-item-match.component.scss', '../list.scss']
})
export class ListItemMatchComponent {
  // wir laden hier die Daten
  data: MatchInfo[] = matchInfos;
}

list-item-match.component.scss

.even {
  background-color: lightblue;
}
.odd {
  background-color: blanchedalmond;
}

list-item-match.component.html

<div class="row" *ngFor="let matchInfo of data; even as isEven; odd as isOdd" [class.even]="isEven" [class.odd]="isOdd">
  <div class="col-no">{{ matchInfo.matchNo }}</div>
  <div class="col-team">{{ matchInfo.teamA }}</div>
  <div class="col-team">{{ matchInfo.teamB }}</div>
  <div class="col-result"><app-result-item-match *ngIf="matchInfo.state !== 'coming'" [goals]="matchInfo.goals"></app-result-item-match></div>
  <div class="col-state">{{ matchInfo.state }}</div>
</div>

result-item-match.component.ts

import { Component, Input } from '@angular/core';
import { GoalInfo } from '../../../data';

@Component({
  selector: 'app-result-item-match',
  templateUrl: './result-item-match.component.html',
  styles: []
})
export class ResultItemMatchComponent {
  @Input()
  goals?: GoalInfo[];

  getResult(): string {
    // check if we have any result, if not we have 0:0
    if (!this.goals || this.goals.length === 0){
      return '0 : 0';
    }
    // the last info has the final result...
    const last = this.goals[ this.goals.length - 1];
    return last.scoreA + ' : ' + last.scoreB;
  }
}

result-item-match.component.html

{{ getResult() }}