json - 使用 HttpClient 在 Angular 中通过外部 API 访问 Json 数据
问题描述
我是角度的初学者。我正在尝试从外部 API 获取数据。我在控制台上成功获取了数据,但是当我尝试在屏幕上呈现它时,我收到如下错误。注意:我使用的是 Angular 版本 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/competitions/424/teams
类文件
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)
解决方案
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>
推荐阅读
- python - 反正有没有用 Python 从 HTML 中获取下一个文本元素?
- javascript - @typescript-eslint/parser parserOptions.ecmaVersion 被忽略/不 linting
- vue.js - 在 Vue JS 和 Firebase 中循环设置其值时不覆盖值
- graph - 从节点获取图中的所有路径,但只有终止的路径
- c++ - 分段错误(核心转储)
- java - 当我在 CUCUMBER 中运行 runner 类时,得到“courgette.runtime.CourgetteException: Unable to create the 'target\chrome' directory”
- java - 使用 intellij 中的 gridLayoutmanager 在 1 行上合并 2 列
- python - 如何在 act_window odoo 中添加域
- scala - 函数文字难题上的隐式参数
- redirect - 如何使用参数设置 OpenAPI 重定向响应?