Observable with Angular 4 , NgFor 只支持绑定到 Iterables 比如数组

Question

是的，我看到其他人也遇到了这个错误，我只是不太明白如何在我的代码中修复它

private _url = 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC,EOS,DASH&tsyms=USD'

如果我没有 return 它不会因错误而崩溃，但我确实想要 return 数据。

我有一个调用此方法的组件（在此服务 ts 文件中）

订阅者：

getAllCoins() {

    var blah = [];

    return this.getCoins().subscribe(
        data => {
            blah = data;               
            //console.log('subscriber coins', blah)
        }
    )

}

调用此代码

getCoins() {
    return this.http.get(this._url)
        .map((response: Response) => response.json())
        //.do(data => console.log(data))
        .do(data => console.log('All: ' + JSON.stringify(data)))  // do operator to peek 
        .catch(this.handleError);
}

现在，我看到来自 url 的数据看起来像这样

{
"BTC": {
  "USD": 3349.1
},
"ETH": {
  "USD": 296.3
},
"LTC": {
  "USD": 47.56
},
"EOS": {
  "USD": 1.83
},
"DASH": {
  "USD": 195.83
}
}

如何防止出现此错误errors.ts:42 ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

更新评论问题

@Component({
template: `
<div>test</div>
<div *ngFor="let coin of coinsList">
 abc
 </div>
`
})

Answer 1

正如错误所说，您正在尝试对对象执行 ngFor，它适用于任何可迭代对象。

也许你可以迭代它们并创建一个数组，然后将它用于 ngFor。

Answer 2

正如其他人所说，*ngFor 仅适用于可迭代对象。

有几种方法可以解决这个问题。我现在想到的是：

1) 您可以将对象列表推送到数组。

this._ConfigurationService.getCoins()
            .subscribe(
            (data)=> {
                for(let key in data){
                  this.coinsList.push(data[key]);
                }
            },
            (error) => console.log("error : " + error)
        );

模板：

<div *ngFor="let coin of coinsList">
    <span>{{coin | json}}</span>
</div>

完整的 plunker 示例：http://plnkr.co/edit/zrzVF8qKl8EvKKp2Qt45?p=preview

2) 您可以使用管道将响应从对象转换为可迭代对象，如下所示：

3) 您可以对您的对象实现可迭代函数，如下所示：Angular NgFor only supports binding to Iterables such as Arrays.

4) 您可以创建特殊指令，如下所示：

为了简单起见，我的建议是使用第一个。

Observable with Angular 4 , NgFor 只支持绑定到 Iterables 比如数组

Observable with Angular 4 , NgFor only supports binding to Iterables such as arrays

json

observable

typescript

angular-components

angular