Доступ к данным Json через внешний API в Angular с помощью HttpClient

Question

Я новичок в угловой.Я пытаюсь получить данные из внешнего API.Я успешно получил данные на консоли, но когда я пытаюсь отобразить их на экране, я получаю следующие ошибки.Примечание: я использую угловую версию 5.2.10 и версию CLI 1.7.4.Я использовал весь импорт правильно, и я также перепробовал много форумов.Заранее спасибо.

Вот мой класс обслуживания:

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import {TeamData} from "./team-data";

const httpOptions = {
headers: new HttpHeaders({ 'X-Auth-Token': 
'62121c4f783e487fbc0785830af63bf4' })
};
@Injectable()
export class TeamService {

constructor(private http: HttpClient) {
 }

getTeams() : Observable <TeamData[]> {
var urlPrefix = "http://api.football-data.org/v1/competitions/424/teams;
return this.http.get<TeamData[]>(urlPrefix, httpOptions);
}
}

Класс компонента:

import { Component, OnInit } from '@angular/core';
import { Team } from '../Team';
import { TeamService } from '../Team.service';
import {TeamData} from "../team-data";

@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})


export class ParentComponent implements OnInit {

teamData : TeamData[];
teams: Team;
constructor(private teamService: TeamService) { }

ngOnInit() {
   this.loadTeams();
}

loadTeams(){
   this.teamService.getTeams().subscribe(data =>{
   console.log(data);
   this.teamData = data;
})
}
}

Файл шаблона

<p>Teams</p>
<div class="container">
<div class="table-responsive" *ngFor="let team of teamData">
<p>{{team.count}}</p>
<p>{{team.links}}</p>
<div *ngFor="let t of team.teams">
  <table class="table table-hover">
    <thead>

    <th>Team Name</th>
    <th>Short Name</th>
    <th>Market Value</th>
    <th>Logo</th>
    </thead>
    <tbody>
    <tr >
      <td>{{t.name}}</td>
      <td>{{t.shortName}}</td>
      <td>{{t.squadMarketValue}}</td>
      <td><img src = {{t.crestUrl}} alt = "logo"></td>
    </tr>
    </tbody>
  </table>
</div>
</div>
</div>

JSON API: http://api.football -data.org / v1 / соревнования / 424 / команды

Файлы классов

import {Link} from "./link";
export class Team {
constructor(public links : Link[], public name: string, public code: string, 
            public shortName: string,public squadMarketValue: string,
            public crestUrl:string){}
}

import {Link} from "./link";
import {Team} from "./team";
export class TeamData {
constructor(public links:Link[], public count : number, public teams: 
            Team[]){}
}

import {Href} from "./href";
export class Link {
    constructor(link: Href[]){}
}

export class Href {
constructor(public href: any){}
}

Сообщение об ошибке:

ParentComponent.html:4 ERROR Error: Cannot find a differ supporting object 
'[object Object]' of type 'object'. NgFor only supports binding to 
Iterables 
such as Arrays.
at NgForOf.ngOnChanges (common.js:2579)
at checkAndUpdateDirectiveInline (core.js:12407)
at checkAndUpdateNodeInline (core.js:13935)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckDirectivesFn (core.js:14712)
at Object.eval [as updateDirectives] (ParentComponent.html:4)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
at checkAndUpdateView (core.js:13844)
at callViewAction (core.js:14195)

Answer 1

Ошибка в том, что вы устанавливаете данные и циклически печатаете все команды.

1- В Team Service ответом является тип объекта JSON {}, а не массив JSON, поэтому необходимо изменитьтип приведения от

<TeamData[]>  

до

 <TeamData> or any.

2- После получения данных вы присваиваете ответ JSON Object переменной JSON Array.

3- В таблице вы должны создать новую строку для каждой команды, а не для всего div, включая таблицу, поэтому здесь вам нужно выполнить цикл по командам.

4- В шаблоне htmlВам не нужно слишком много циклов, просто удалите все циклы, так как они не нужны.

Answer 2

API возвращает объект, а не массив.

{
  "_links": {},
  "count": 24,
  "teams": Array[24][]
}

Это должно работать нормально:

<p>Teams</p>
<div class="container">
    <div class="table-responsive" *ngIf="teamData">
      <p>{{teamData.count}}</p>
      <p>{{teamData.links}}</p>
      <div *ngFor="let t of teamData.teams">
        <table class="table table-hover">
          <thead>
            <th>Team Name</th>
            <th>Short Name</th>
            <th>Market Value</th>
            <th>Logo</th>
          </thead>
          <tbody>
          <tr >
            <td>{{t.name}}</td>
            <td>{{t.shortName}}</td>
            <td>{{t.squadMarketValue}}</td>
            <td><img src = {{t.crestUrl}} alt = "logo"></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
</div>