Recently delving into Angular and attempting to retrieve JSON League Table data from the API, I encountered an error message stating Type 'Promise' is not assignable to type 'LeagueTable'.
leaguetable.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators/map';
const baseUrl = 'http://api.football-data.org/v1';
@Injectable({
providedIn: 'root'
})
export class LeaguetableService {
constructor(private http: HttpClient) { }
getLeagueTable() {
let headers = new HttpHeaders();
headers = headers.set('X-Auth-Token', 'apikey');
return this.http.get(baseUrl +'/competitions/445/leagueTable', { headers: headers })
.pipe(map((res: Response) => res.json()));
}
}
leaguetable.component.ts
import { Component, OnInit } from '@angular/core';
import { LeagueTable } from '../league-table';
import { LeaguetableService } from '../leaguetable.service';
@Component({
selector: 'app-leaguetable',
templateUrl: './leaguetable.component.html',
styleUrls: ['./leaguetable.component.css']
})
export class LeaguetableComponent implements OnInit {
leagueTable: LeagueTable;
constructor(private leagueTableService: LeaguetableService) { }
ngOnInit() {
this.getLeagueTable();
}
getLeagueTable() {
this.leagueTableService.getLeagueTable().subscribe(leagueTable => this.leagueTable = leagueTable);
}
}
league-table.ts
export class LeagueTable {
leagueCaption: string;
matchday: number;
standing: ({
rank: number;
team: string;
teamId: number;
playedGames: number;
crestURI: string;
points: number;
goals: number;
goalsAgainst: number;
goalDifference: number;
})
}
Seeking guidance on why this issue is occurring, any assistance is highly appreciated!
EDIT: Attached class file for enhanced clarity.