angular - 如何修复错误：找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays

问题描述

我收到的角度错误消息为： 错误：找不到类型为“对象”的不同支持对象“[对象对象]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

根据我理解的错误消息，它即将到来是因为我将 API 响应作为对象获取并尝试通过数组 *ngFor 进行绑定。

我尝试了一些解决方法，例如异步管道，但也没有用。

有人可以帮我解决我在做什么错误吗？

示例.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class BitcoinService {
  constructor(private _httpClient: HttpClient) {}

  // API endpoint
  apiURL = 'https://api.coindesk.com/v1/bpi/currentprice.json';

  // Create method
  coinData(): Observable<any> {
    return this._httpClient.get<any>(this.apiURL);
  }
}

例子.component.ts

import { Component, OnInit } from '@angular/core';
import { BitcoinService } from './bitcoin.service';

@Component({
  selector: 'app-bitcoin',
  templateUrl: './bitcoin.component.html',
  styleUrls: ['./bitcoin.component.css']
})
export class BitcoinComponent implements OnInit {
  // Define Property
  showData;

  // Inject Service
  constructor(private _bitcoinService: BitcoinService) {}

  ngOnInit() {
    // call the method
    this.getCoinData();
  }

  // Create Method
  getCoinData() {
    this._bitcoinService.coinData().subscribe(res => {
      console.log(res);
      this.showData = res;
    });
  }
}

example.component.html

<!-- Test The Result -->
<ul *ngFor="let data of showData">
  <li> {{data.disclaimer}} </li>>
</ul>

错误信息

ERROR
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

stackblitz 链接供参考 https://stackblitz.com/edit/angular-simple-api-get-call-1?file=src/app/observable-examples/example-1/bitcoin/bitcoin.component.ts

标签： angular

angular - 如何修复错误：找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays

问题描述

解决方案

推荐阅读