Angular NgFor仅支持绑定到诸如Arrays之类的Iterables [英] Angular NgFor only supports binding to Iterables such as Arrays

问题描述

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

I am getting an error while trying to loop through and display data using ngFor.

控制台中的实际错误错误：找不到不同的支持对象'[对象对象]''类型'对象'.NgFor仅支持绑定到Iterables，例如Arrays。

Actual error in console "Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

这是我的代码：

// TS组件

//TS Component

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

// localstorage array

//localstorage array

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

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 适用于iterables。可迭代对象是实现返回迭代器的 [Symbol.iterator] 方法的对象。您可以在此处了解更多相关信息。默认情况下，只有Array和Map可以在JS中迭代。

ngFor works with iterables. An iterable object is the object that implements [Symbol.iterator] method that returns an iterator. You can read more about it here. Only Array and Map are iterable in JS by default.

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

Objects in JavaScript are not iterable. And your sessionsObject is simple object and it therefore doesn't implement [Symbol.iterator] method. But you can easily implement it yourself:

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

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