Question

我需要在Angular2的列表中为每个项重复几个li - 元素。在角度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前缀。

根据ngFor上的Victor Savkin和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>

Answer 2

在较新的版本中，它的工作原理如下：

<ul class="dropdown-menu" role="menu">
  <template ngFor let-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>

- ＆GT; let-category 而不是 #category

Answer 3

感谢您的努力，pixelbits，但答案是不同的。

阅读Template Syntax in the Angular.io guides中的星号，可以为您提供线索。

这解决了它：

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

Answer 4

使用 5.2.x

<ng-template ngFor let-category [ngForOf]="categories">
  <label class="value-fields_label">{{ category.name }}</label>
  <h3 class="value-fields_value">{{ category.title }}</h3>
</ng-template>

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

4 个答案: