angular2 中的 Ng-repeat-start - 也就是使用 NgFor 重复多个元素答案

【问题标题】：Ng-repeat-start in angular2 - aka repeat multiple elements using NgForangular2 中的 Ng-repeat-start - 也就是使用 NgFor 重复多个元素
【发布时间】：2016-04-04 15:28:48
【问题描述】：

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

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

如果要重复内容，请使用template 标签，并删除ngFor 上的* 前缀。

根据Victor SavkinngFor和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>

【讨论】：

是的，但我需要为每个类别重复所有五个<li>，而且我不能在不破坏列表的情况下将<div> 放入其中...
您输入的<li *ngFor="#tag of category.tags"> ... </li> 是第一个重复中的另一个重复，应该可以正常工作。
如果你把父ngFor放在<ul>标签上，它会重复分类。
供您编辑：我不希望
也许应该是：<template ngFor #category [ngForOf]="categories">

【解决方案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>

【讨论】：

仅供参考，NgFor API doc 也显示<template ngFor #item [ngForOf]="items">...</template> 语法。太糟糕了，他们没有强调必须使用这种语法来重复多个元素的事实。
感谢您的留言
这种语法不再适用于 Angular 4.x.x，对吧？只有let

【解决方案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

【讨论】：

【解决方案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>

【讨论】：