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

Question

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

Answer 2

感谢您的努力，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 3

在较新的版本中，它是这样工作的：

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

--> let-category 而不是 #category

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>

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

Ng-repeat-start in angular2 - aka repeat multiple elements using NgFor

angular2-template

angular