在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) 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) 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屋!