我需要在Angular2的每个项目的列表中重复几个li元素。在角度1.x中,我使用了ng-repeat-start和ng-repeat-end。我在Angular 2中找不到正确的方法。有
some older blog posts关于这个,但他们的建议不适用于Angular2的最新beta。
应该为每个类别重复所有< li>元素:
(我通常会使用属性* ngFor =“#类别” – 但我找不到放在哪里…
帮帮我?
<ul class="dropdown-menu" role="menu"> <li class="dropdown-header"> {{ category.title }} </li> <li> <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a> </li> <li class="divider"></li> <li class="dropdown-header">Alle musikstykker</li> <li><a href="/music/all">Alle musikstykker</a></li> </ul>
如果要重复内容,请使用模板标签,并在ngFor上删除*前缀。
根据Victor Savkin on ngFor和模板:
Angular treats template elements in a special way. They are used to
create views,chunks of DOM you can dynamically manipulate. The *
Syntax is a shortcut that lets you avoid writing the whole
element.
<ul class="dropdown-menu" role="menu"> <template ngFor #category [ngForOf]="categories"> <li class="dropdown-header"> {{ category.title }} </li> <li> <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a> </li> <li class="divider"></li> <li class="dropdown-header">Alle musikstykker</li> <li><a href="/music/all">Alle musikstykker</a></li> </template> </ul>
更新角度^ 2.0.0
您可以使用ng-container,只需更改#var即可。
< NG-容器>行为与< template>相同但允许使用更常见的语法。
<ul class="dropdown-menu" role="menu"> <ng-container *ngFor="let category of categories"> <li class="dropdown-header"> {{ category.title }} </li> <li> <a href="{{ '/music/' + tag.keyword }}" *ngFor="let tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a> </li> <li class="divider"></li> <li class="dropdown-header">Alle musikstykker</li> <li><a href="/music/all">Alle musikstykker</a></li> </ng-container> </ul>