Angular "NgFor only supports binding to Iterables such as Arrays" Error

Question

I try to group some of div elements to use them with OwlCarousel 2. You can see ngFor statements in my html code in the first two line. I try to group six elements per carousel page. Six div elements will be in parent div element. Here's my html code;

<div *ngFor="let group of blogList">
    <div class="b-blog__posts-one wow zoomInUp" data-wow-delay="0.3s" *ngFor="let item of group?.Items">
        <div class="row">
            <div class="col-xs-8">
                <header class="b-blog__posts-one-body-head s-lineDownLeft">
                    <div class="b-blog__posts-one-body-head-notes">
                        <span class="b-blog__posts-one-body-head-notes-note"><span class="fa fa-user"></span>{{ item?.SenderName }}</span>
                        <span class="b-blog__posts-one-body-head-notes-note"><span class="fa fa-calendar-o"></span>{{ item?.SendDate }}</span>
                        <span class="b-blog__posts-one-body-head-notes-note"><span class="fa fa-comment"></span>{{ item?.CommentCount }} {{ comment }}</span>
                    </div>
                </header>
            </div>
        </div>
    </div>
</div>

and Here's my TypeScript code;

GetBlogContent() {
    this.service.get("Site", "GetBlogPosts", 20).subscribe((resData: any) => {
        let j: number = 0;
        this.blogList = new Array();

        resData.forEach((item, i) => {
            if (i % 5 == 0) {
                this.blogList[j] = new Object();
                this.blogList[j].Items = new Array();
            }

            this.blogList[j].Items[i % 5] = item;

            if (i % 5 == 4) {
                j++;
            }
        });
    }, resError => this.errorMsg = resError);
}

It works well if I don't publish and run in localhost cause it doesn't convert and minify my typescript codes. But when I publish it for angular and my code is being converted like below it gives error like:

"NgFor only supports binding to Iterables such as Arrays".

GetBlogContent() {
    this.service.get("Site", "GetBlogPosts", 20).subscribe(l => {
        let n = 0;
        this.blogList = new Array,
            l.forEach((l, t) => {
                t % 5 == 0 && (this.blogList[n] = new Object,
                    this.blogList[n].Items = new Array),
                    this.blogList[n].Items[t % 5] = l,
                    t % 5 == 4 && n++
            }
            )
    }
        , l => this.errorMsg = l)
}

I really couldn't find where I do wrong. I tried many different ways to group them but they didn't work. At least I found this way and it worked well on local. But it doesn't work on live unfortunately. Hope I could explain my problem. I'm waiting for your answer.

thanks man. it gives error cause blogList is null. i checked why it's null because in my sql procedure i order my select list by an nvarchar column converted to datetime. it works well in my computer well bu it didn't work on live. i think it's because of some globalization problem. anyway i changed it to order by id and it works well now. thanks again. — thrashead

mbojko mbojko · Accepted Answer · 2019-09-17T07:03:29

Functional style it's easier. Certainly shorter:

let resData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
const length = Math.ceil(resData.length / 5);

let blogList = Array.from({ length })
  .map((x, j) => ({
    Items: resData.filter((y, i) => i >= 5 * j && i < 5 * (j + 1))
  }));

console.log(blogList);

Angular "NgFor only supports binding to Iterables such as Arrays" Error

1 Answers