【问题标题】:Angular NgFor only supports binding to Iterables such as ArraysAngular NgFor 仅支持绑定到 Iterables,例如 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 而不是对象。
  • @echonax,你需要传递一个iterable,它可以是任何带有iterable接口的东西,看下面我的回答
  • 嘿,my answer 有帮助吗?
  • 抱歉回复晚了,时区问题,我试过你的建议,但没有运气。我不确定这是否是 Ionic 3 问题。

标签: arrays json angular typescript ionic2


【解决方案1】:

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-07
    • 2017-02-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多