Ng-repeat-start in angular2 - 也就是使用NgFor重复多个元素

Question

我需要li在Angular2的列表中为每个项重复几个元素.在角度1.x我使用ng-repeat-start和ng-repeat-end为此.我无法在Angular 2中找到正确的方法.有一些较旧的博客文章,但他们的建议不适用于最新的Angular2测试版.

<li>应该为每个类别重复所有元素:(我通常会对属性进行处理*ngFor="#category of categories"- 但我找不到放在哪里...

救命？

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

Answer 1

如果要重复内容,请使用template标记,然后删除*前缀ngFor.

据维克多Savkin上ngFor和templates:

Angular以特殊方式处理模板元素.它们用于创建视图,可以动态操作的DOM块.*语法是一种快捷方式,可以避免编写整个元素.

<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为let var.

<ng-container>行为与<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>