在Angular 4上可以观察到，NgFor仅支持绑定到Iterables(例如数组) [英] Observable with Angular 4 , NgFor only supports binding to Iterables such as arrays

问题描述

是的，我看到其他人遇到此错误，我只是不太了解如何在我的代码中解决此问题

Yes, I see that other people get this error , I just don't quite get how to fix it in my code

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

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

If I didn't have the return it does not crash with the error , but I do want to return the data.

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

I have a component that calls up this method ( in this service ts file )

订户:

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中的数据看起来像这样

Now, I see that the data from the url looks like this

{
"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>
`
})

推荐答案

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

As others have said, *ngFor only works on iterables.

有两种方法可以解决此问题.我现在想到的是:

There are a couple of methods that can be done to overcome this problem. Ones that come to my mind right now are:

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

1) You can push your list of objects to an Array.

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>

完整的监听器示例: http://plnkr.co/edit/zrzVF8qKl8EvKKp2Qt45?p=preview

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

2) You can convert the response from object to an iterable using a pipe as shown in here: How to iterate [object object] using *ngFor in Angular 2

3)您可以对对象实现可迭代功能，如下所示:

3) You can implement the iterable function to your object as shown here: Angular NgFor only supports binding to Iterables such as Arrays.

4)您可以创建如下所示的特殊指令:可以在Angular 4中使用ngForIn吗?

4) You can create special directive as shown here: Can ngForIn be used in angular 4?

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

My suggestion would be to use the first one for simplicity.

这篇关于在Angular 4上可以观察到，NgFor仅支持绑定到Iterables(例如数组)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！