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.

Answer 1

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);