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

Posted 2023-03-13

【中文标题】Angular 4 Observable，NgFor 只支持绑定到 Iterables，比如数组

【英文标题】：Observable with Angular 4 , NgFor only supports binding to Iterables such as arrays

【发布时间】：2018-01-18 04:53:39

【问题描述】：

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

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

如果我没有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>
`
)

【问题讨论】：

它总是返回一个对象还是有可能返回一个数组？

你不需要数组，可以很容易地在一个对象上实现你自己的可迭代***.com/a/45321622/2545680

你能帮我看看吗，我不太明白

@JohnBaxter，您如何在模板中使用blah，您希望如何看到呈现的html？显示在您的问题中

@Maximus - 尝试在我更新的问题中使用它，显示模板的代码 thx

【参考方案1】：

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

也许您可以遍历它们并创建一个数组，然后将其用于 ngFor。

【讨论】：

它适用于任何可迭代对象，而不仅仅是数组***.com/a/45321622/2545680

等等，我该怎么做？似乎我对订阅者及其调用的方法做得很好，还是有更好的方法来编写该代码？

我看到有些人使用 Observable 甚至不使用订阅 - 我可以/应该更改我的代码，如何？ getProducts(): Observable<IProduct[]> return this._http.get(this._productUrl) .map((response: Response) => <IProduct[]> response.json()) .do(data => console.log('All: ' + JSON.stringify(data))) .catch(this.handleError);

【参考方案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) 您可以使用管道将响应从对象转换为可迭代对象，如下所示：How to iterate [object object] using *ngFor in Angular 2

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

4) 您可以创建如下所示的特殊指令：Can ngForIn be used in angular 4?

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

【讨论】：

由于某种原因，我收到一个错误 ERROR TypeError: Cannot read property 'push' of undefined 我正在做与订阅服务相同的事情

哦，唯一不同的是，如果我设置了coinsList:[]，那么'any'类型的this.coinsList.push(data[key]) show error of Argument不能分配给'never'类型的参数`，所以我改为`硬币清单：任何；没有视觉错误 - 但我认为对数组有意义的推送错误......呃，你的 plunker 是怎么工作的

@JohnBaxter 你可能没有初始化coinsList。我已经在coinsList = []; 字段中初始化了它，你只是用coinsList:[]; 声明它的类型。即:和=不是同一个操作。找出两张图片之间的差异:-)

是的 - 很酷 - 我喜欢打字稿，只是不想再考虑 javascript ha thx

@JohnBaxter 没问题 :-)