Angular NgFor 仅支持绑定到 Iterables，例如 Arrays

Posted 2023-03-13

【中文标题】Angular NgFor 仅支持绑定到 Iterables，例如 Arrays

【英文标题】：Angular NgFor only supports binding to Iterables such as Arrays

【发布时间】：2018-01-01 10:21:55

【问题描述】：

我在尝试使用 ngFor 循环和显示数据时遇到错误。

控制台中的实际错误“错误：找不到类型为'object'的不同支持对象'[object Object]'。NgFor 仅支持绑定到Iterables，例如数组。”

这是我的代码：

//TS组件

var lssessionsObject = JSON.parse(localStorage.getItem('sessionsObject'));

//本地存储数组

lssessionObject = "total_rows":1,"offset":0,"rows":["id":"245fd1cbf38f79256a7443a0b5001461","key":"245fd1cbf38f79256a7443a0b5001461","value":"cinemaid":"0001","session":"168970","filmid":"HO00003858","screen":"VIP 1","datetime":"2017-07-22T11:00:00","attributes":["3D Film","Scene VIP"]]

html

<ion-slides class="image-slider" slidesPerView="3" pager="true">
        <ion-slide *ngFor="let item of sessionsObject" class="border">
        <button ion-item color="primary" id=item.filmid class="bottom-slider">
            item.filmid
        </button>

    </ion-slide>
</ion-slides>

请帮帮我

【问题讨论】：

正如消息中明确指出的那样：您需要将数组传递给您的 ngFor 而不是对象。

***.com/questions/41396435/…

@echonax，你需要传递一个iterable，它可以是任何带有iterable接口的东西，看下面我的回答

嘿，my answer 有帮助吗？

抱歉回复晚了，时区问题，我试过你的建议，但没有运气。我不确定这是否是 Ionic 3 问题。

【参考方案1】：

ngFor 与可迭代对象一起使用。可迭代对象是实现返回迭代器的[Symbol.iterator] 方法的对象。你可以阅读更多关于它的信息here。 JS 中默认只有 Array 和 Map 是可迭代的。

javascript 中的对象是不可迭代的。而您的 sessionsObject 是简单对象，因此它没有实现 [Symbol.iterator] 方法。但是您可以轻松地自己实现它：

// 
lssessionsObject[Symbol.iterator] = function* () 
   for (p in this) yield this[p];