angular - angular2 中的 Ng-repeat-start - 又名使用 NgFor 重复多个元素

Question

我需要重复几个li -Angular2 列表中每个项目的元素。在 Angular 1.x 中，我使用了 ng-repeat-start和 ng-repeat-end为了这。我在 Angular 2 中找不到正确的方法。有 some older blog posts关于这一点，但他们的建议在 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 .

根据 Victor Savkin在 ngFor和 templates :

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>

更新 Angular ^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>