Angular 14调用RapidAPI遇NG02200错误：*ngFor无法遍历对象

错误原因 #

*ngFor 仅支持遍历数组（Iterable），而你从RapidAPI获取的响应是一个对象（[object Object]），直接将整个对象赋值给coinsList，导致Angular无法识别为可遍历集合，因此抛出NG02200错误。

解决步骤 #

1. 确认API返回的数据结构 #

查看控制台打印的this.coinsList，找到其中存储加密货币数组的具体属性名。从你代码里的注释interface Response { results: Coins[] }来看，数组大概率在results字段下，实际结构类似：

{
  "results": [
    {"name": "Bitcoin", ...},
    {"name": "Ethereum", ...}
  ]
}

2. 修改组件赋值逻辑 #

将coinsList赋值为对象中的数组部分，而非整个响应对象：

getCoinsList() {
    let options = {
        method: 'GET',
        headers: {
            'X-RapidAPI-Key': '4c10ffb7eemsha0cedbbe44177e3p1b0292jsn06e3680b3b7b',
            'X-RapidAPI-Host': 'cryptocurrency-markets.p.rapidapi.com'
        }
    }
    return this.http.get('https://cryptocurrency-markets.p.rapidapi.com/coins?page=1', options).subscribe((res: any) => {
        // 替换results为你实际找到的数组属性名
        this.coinsList = res.results; 
        console.warn(this.coinsList);
    })
}

3. 优化类型定义（可选但推荐） #

避免使用any，定义明确类型提升代码可维护性：

// 单个加密货币的类型
interface Coin {
    name: string;
    // 添加你需要的其他属性，如价格、图标URL等
}

// API响应的类型
interface ApiResponse {
    results: Coin[];
}

export class CryptoListComponent implements OnInit {
    // 初始化为空数组，避免页面加载时的空值异常
    coinsList: Coin[] = []; 

    constructor(private http: HttpClient) { }

    ngOnInit(): void {
        this.getCoinsList()
    }

    getCoinsList() {
        let options = {
            method: 'GET',
            headers: {
                'X-RapidAPI-Key': '4c10ffb7eemsha0cedbbe44177e3p1b0292jsn06e3680b3b7b',
                'X-RapidAPI-Host': 'cryptocurrency-markets.p.rapidapi.com'
            }
        }
        return this.http.get<ApiResponse>('https://cryptocurrency-markets.p.rapidapi.com/coins?page=1', options).subscribe((res) => {
            this.coinsList = res.results;
            console.warn(this.coinsList);
        })
    }
}

4. 页面添加空值判断（可选） #

为避免页面加载初期coinsList为空时的异常，可在HTML中添加判断：

<div *ngIf="coinsList.length > 0" class="row details mt-3" *ngFor="let coin of coinsList">
  <div class="col-3">
    <a href=""><img src="..." class="mb-3"></a>
  </div>
  <div class="col-3">
    <p>{{coin.name}}</p>
  </div>
  <div class="col-3 text-center">
    <p>Price</p>
  </div>
  <div class="col-3 text-end">
    <p>1</p>
  </div>
</div>

关键注意点 #

• 务必确认API返回的数组属性名，不同接口字段名可能不同（如data、items等），以控制台打印的实际结构为准。
• 初始化coinsList为空数组，避免Angular在订阅完成前尝试遍历undefined。

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