[英]Angular “NgFor only supports binding to Iterables such as Arrays” Error
I try to group some of div elements to use them with OwlCarousel 2
. 我尝试对一些div元素进行分组,以将其与OwlCarousel 2
一起使用。 You can see ngFor
statements in my html code in the first two line. 您可以在前两行的html代码中看到ngFor
语句。 I try to group six elements per carousel page. 我尝试在每个轮播页面上对六个元素进行分组。 Six div elements will be in parent div element. 六个div元素将位于父div元素中。 Here's my html code; 这是我的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>
and Here's my TypeScript code; 这是我的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);
}
It works well if I don't publish and run in localhost cause it doesn't convert and minify my typescript codes. 如果我不发布并在localhost中运行,它会很好地工作,因为它不会转换和缩小我的打字稿代码。 But when I publish it for angular and my code is being converted like below it gives error like: 但是,当我将其发布为angular时,并且我的代码如以下那样被转换时,会出现如下错误:
"NgFor only supports binding to Iterables such as Arrays". “ 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)
}
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. 我在等你的答案。
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.