Angular“ NgFor仅支持绑定到可迭代对象，例如数组”错误

Question

我尝试对一些div元素进行分组，以将其与OwlCarousel 2一起使用。 您可以在前两行的html代码中看到ngFor语句。 我尝试在每个轮播页面上对六个元素进行分组。 六个div元素将位于父div元素中。 这是我的html代码；

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

这是我的TypeScript代码；

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

如果我不发布并在localhost中运行，它会很好地工作，因为它不会转换和缩小我的打字稿代码。 但是，当我将其发布为angular时，并且我的代码如以下那样被转换时，会出现如下错误：

“ NgFor仅支持绑定到Iterables，例如数组”。

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

我真的找不到我做错了什么。 我尝试了多种方法将它们分组，但是它们没有用。 至少我发现这种方式，并且在本地运行良好。 不幸的是，它无法正常工作。 希望我能解释我的问题。 我在等你的答案。

Answer 1

功能样式更容易。 当然更短：

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