Aufgabe 2, Service Lösung

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

Den Service zu erstellen sollte ja kein Problem sein. Was im Service steht, da sieht es wohl anders aus :-)

Um den Service mit http verwenden zu können musst du das Modul im app.module.ts angepasst werden.

AppModule

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { TableMatchesComponent } from './table-matches/table-matches.component';
import { ListHeaderMatchesComponent } from './list/list-header-matches/list-header-matches.component';
import { ListItemMatchComponent } from './list/list-item-match/list-item-match.component';
import { ResultItemMatchComponent } from './list/list-item-match/result-item-match/result-item-match.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    TableMatchesComponent,
    ListHeaderMatchesComponent,
    ListItemMatchComponent,
    ResultItemMatchComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

MatchesService

matches.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, tap } from 'rxjs';
import { MatchInfo } from './data';

@Injectable({
  providedIn: 'root'
})
export class MatchesService {

  dataExpress$: BehaviorSubject<MatchInfo[]> = new BehaviorSubject<MatchInfo[]>([]);
  dataNodeRed$: BehaviorSubject<MatchInfo[]> = new BehaviorSubject<MatchInfo[]>([]);

  constructor(
    private readonly httpClient: HttpClient
  ) { }

  loadAllExpress() {
    this.httpClient.get<MatchInfo[]>('http://localhost:3000/matches').pipe(
      tap( (arr) => console.log(`loadAllExpress: ${arr.length}`))
    ).subscribe(
      arr => this.dataExpress$.next(arr)
    );
  }
  loadAllNodeRed() {
    this.httpClient.get<MatchInfo[]>('http://localhost:1880/matches').pipe(
     tap( (arr) => console.log(`loadAllNodeRed: ${arr.length}`))
    ).subscribe(
      arr => this.dataNodeRed$.next(arr)
    );
  }

}

TableMatchesComponent

table-matches.component.ts

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

@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[]

  constructor(private readonly service: MatchesService) {
    service.dataExpress$.subscribe( (arr) => this.data = arr)

    // load the data
    service.loadAllExpress();
  }

  /***
   * 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;
  }
}

ListItemMatchComponent

list-item-match.component.ts

import { Component } from '@angular/core';
import { MatchInfo } from '../../data';
import { MatchesService } from '../../matches.service';

@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[]

  constructor(private readonly service: MatchesService) {
    service.dataNodeRed$.subscribe( (arr) => this.data = arr)

    // load the data
    service.loadAllNodeRed();
  }

}