Angular 5中HttpClient获取API数据后渲染页面报错求助

嘿，我来帮你搞定这个Angular渲染报错的问题！

首先先拆解下你遇到的错误核心：Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.——说白了就是你用*ngFor去遍历一个普通对象，但这个指令只能处理数组这类可迭代的集合。

问题根源分析 #

看一下你调用的API返回结构，它是一个单个的TeamData对象（包含count、links、teams数组这几个属性），但你在代码里错误地把它当成了数组来处理：

1. 服务类里的getTeams()返回了Observable<TeamData[]>（数组类型）
2. 组件里把teamData声明成了TeamData[]
3. 模板里还用*ngFor="let team of teamData"去遍历这个对象

这就导致NgFor指令懵了：我只能遍历数组，你给我个对象我怎么处理？于是就抛出了那个错误。

一步步修正方案 #

1. 修正服务类的返回类型

把getTeams()的返回类型改成单个TeamData对象，同时顺便修复你原代码里URL末尾少打引号的小问题：

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> { 
    const urlPrefix = "http://api.football-data.org/v1/competitions/424/teams"; 
    return this.http.get<TeamData>(urlPrefix, httpOptions); 
  } 
}

2. 修正组件类的变量类型

把组件里的teamData从数组类型改成单个对象类型：

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; 
    }) 
  } 
}

3. 修正模板文件

去掉错误的外层*ngFor，直接访问teamData的属性，同时加上安全导航符?.（避免组件初始化时teamData还未加载导致的报错），另外把图片的src改成Angular规范的属性绑定写法：

<p>Teams</p>
<div class="container">
  <div class="table-responsive">
    <p>{{teamData?.count}}</p>
    <p>{{teamData?.links}}</p>
    <!-- 只需要遍历teamData里的teams数组 -->
    <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>

额外小提示：修正Link类定义

你的Link类构造函数没有把参数声明为公共属性，这样后续访问teamData.links时可能拿不到数据，建议改成：

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

做完这些修改后，页面应该就能正常渲染API返回的球队数据了～

内容的提问来源于stack exchange，提问作者Mitesh