[英]Angular 2 nested ngFor not iterating
I have this html: 我有这个HTML:
<div class="col-md-4" *ngFor="let category of categories">
<h3>{{category.name}} ({{category.links.length}})</h3>
<div>
<ul>
<li *ngFor="let link of category.links">
<a href="" [href]="link.url" target="_blank">{{link.displayName}}</a>
</li>
</ul>
</div>
</div>
As you can see I loop through a list of categories and for each category I loop through a list of links. 如您所见,我遍历类别列表,对于每个类别,我遍历链接列表。
The problem is the nested ngFor
: it doesn't iterate anything. 问题是嵌套的
ngFor
:它不会迭代任何东西。 I am certain that there are items in that list because ({{category.links.length}})
gives ma a result. 我确定该列表中有项目,因为
({{category.links.length}})
给了ma结果。
Also, when I dump my category list to the console, I can see the complete object graph: every category has at lest one item in the links
array. 另外,当我将类别列表转储到控制台时,我可以看到完整的对象图:每个类别在
links
数组中至少有一项。
So, what am I missing here? 那么,我在这里想念什么? What do I need to do to get this working?
我需要做什么才能使它正常工作?
Edit: This is the generated html (an li tag) 编辑:这是生成的html(一个li标签)
<!--template bindings={
"ng-reflect-ng-for-of": "[object Object]"
}-->
here is the corresponsing typescript: 这是对应的打字稿:
constructor(private linkService: LinkService){
this.linkService.getLinks().subscribe(p => {console.log(p); this.categories = p});
}
And here are the definitions of Category and LinkItem: 这是Category和LinkItem的定义:
export class Category {
name : string;
links = new Array<LinkItem>();
constructor(name:string)
{
this.name = name;
}
addLink(linkItem : LinkItem)
{
this.links.push(linkItem);
}
}
export class LinkItem {
url:string;
displayName:string;
constructor(url:string, displayName:string)
{
this.url = url;
this.displayName = displayName;
}
}
As per your categories
object structure HTML should be as below : 根据您的
categories
对象结构,HTML应该如下所示:
<div class="col-md-4" *ngFor="let category of categories">
<h3>{{category.name}} ({{category.links.length}})</h3>
<div>
<ul>
<li *ngFor="let link of category.links">
<a [href]="link.url" target="_blank">{{link.name}}</a>
</li>
</ul>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.