Observable 与 Angular 4 ，NgFor 仅支持绑定到 Iterables，例如数组 [英] Observable with Angular 4 , NgFor only supports binding to Iterables such as arrays

问题描述

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

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

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

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

订阅者:

getAllCoins() {var blah = [];返回 this.getCoins().subscribe(数据 =>{等等 = 数据；//console.log('订阅者硬币'，等等)})}

调用此代码

getCoins() {返回 this.http.get(this._url).map((响应:响应) => response.json())//.do(data => console.log(data)).do(data => console.log('All: ' + JSON.stringify(data)))//做运算符查看.catch(this.handleError);}

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

<代码>{比特币":{美元":3349.1},以太":{美元":296.3},LTC":{美元":47.56},EOS":{美元":1.83},破折号":{美元":195.83}}

如何防止出现此错误 errors.ts:42 错误错误:未捕获(承诺):错误:找不到类型为对象"的不同支持对象[对象对象]".NgFor 只支持绑定到 Iterables，比如 Arrays.

评论问题的更新

@Component({模板:`<div>测试</div><div *ngFor="let coin ofcoinsList">美国广播公司

`})

解决方案

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

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

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

this._ConfigurationService.getCoins().订阅((数据)=>{for(让输入数据){this.coinsList.push(data[key]);}},(错误) =>console.log("错误:" + 错误));

模板:

<span>{{硬币 |json}}</span>

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

2) 您可以使用管道将响应从对象转换为可迭代对象，如下所示:如何在Angular 2中使用*ngFor迭代[object object]

3) 您可以为您的对象实现可迭代函数，如下所示:Angular NgFor 仅支持绑定到可迭代对象，例如数组.

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

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

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'

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

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

Subscriber:

getAllCoins() {

    var blah = [];

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

}

Calls this code

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);
}

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
}
}

How can I prevent from getting this error 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.

UPDATE for comment question

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

解决方案

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) 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)
        );

template:

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

Full plunker example: 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) 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.

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