Angular 4中*ngFor绑定非可迭代对象报错：无法找到支持对象'[object Object]'

我来帮你排查Angular 4里用*ngFor绑定API返回JSON数据时的常见问题，结合你描述的代码结构，给你几个关键的解决思路和调试技巧：

1. 先对齐你的代码结构（模拟你描述的实现） #

接口定义 countryList.ts

export interface CountryList {
  UserName: string;
  Country: string[];
}

服务类 LoginServicesService

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { CountryList } from './countryList';

@Injectable()
export class LoginServicesService {
  constructor(private http: Http) { }

  functionCountriesList(username: string): Observable<CountryList> {
    // 假设你的API请求地址是类似这样的格式
    return this.http.get(`/api/user-countries?username=${username}`)
      .map(response => response.json() as CountryList);
  }
}

组件模板与逻辑（常见写法）

import { Component, OnInit } from '@angular/core';
import { LoginServicesService } from './login-services.service';
import { CountryList } from './countryList';

@Component({
  selector: 'app-country-list',
  template: `
    <h3>{{ userData?.UserName }}的国家列表</h3>
    <ul>
      <!-- 这里是*ngFor的核心绑定位置 -->
      <li *ngFor="let country of userData?.Country">
        {{ country }}
      </li>
    </ul>
  `
})
export class CountryListComponent implements OnInit {
  userData: CountryList;

  constructor(private loginService: LoginServicesService) { }

  ngOnInit() {
    this.loginService.functionCountriesList('testUser')
      .subscribe(data => {
        this.userData = data;
      });
  }
}

2. 常见错误原因及解决办法 #

错误1：Cannot find a differ supporting object '[object Object]'

这个错误大概率是因为你要遍历的Country字段不是数组——可能API返回的是字符串（比如逗号分隔的"中国,美国"）、单个对象，或者字段名和接口定义不匹配。

解决步骤：

• 先在subscribe里打印返回数据，确认结构：

  this.loginService.functionCountriesList('testUser')
    .subscribe(data => {
      console.log('API返回原始数据:', data); // 检查Country是不是数组类型
      this.userData = data;
    });
  

• 如果Country是字符串，手动转成数组：

  this.loginService.functionCountriesList('testUser')
    .subscribe(data => {
      // 假设返回的Country是"中国,美国,日本"格式
      data.Country = data.Country.split(',');
      this.userData = data;
    });
  

错误2：Cannot read property 'Country' of undefined

HTTP请求是异步的，组件初始化时userData还没赋值，直接访问userData.Country会报错。

解决步骤：

• 用可选链操作符?.（Angular 4+支持）做安全访问：

  <li *ngFor="let country of userData?.Country">
  

• 或者用*ngIf先判断数据是否加载完成：

  <div *ngIf="userData">
    <h3>{{ userData.UserName }}的国家列表</h3>
    <ul>
      <li *ngFor="let country of userData.Country">
        {{ country }}
      </li>
    </ul>
  </div>
  

错误3：API响应结构与接口不匹配

如果API返回的字段名和你定义的CountryList接口不一致（比如API返回的是countries而不是Country），映射后的数据会不符合预期。

解决步骤：

• 调整服务里的映射逻辑，对齐API返回字段：

  functionCountriesList(username: string): Observable<CountryList> {
    return this.http.get(`/api/user-countries?username=${username}`)
      .map(response => {
        const res = response.json();
        // 手动映射API字段到接口定义
        return {
          UserName: res.user_name, // 对应API返回的用户名字段
          Country: res.countries // 对应API返回的国家列表字段
        } as CountryList;
      });
  }
  

3. 额外调试技巧 #

• 打开Chrome开发者工具的Network标签，查看API请求的响应内容，确认JSON结构和你预期的完全一致；
• 如果遇到跨域错误，要确保后端已经配置了CORS，或者Angular项目配置了代理转发。

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