27

我需要li在 Angular2 的列表中为每个项目重复几个元素。在 angular 1.x 中，我使用了ng-repeat-startand 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>
4

4 回答 4

54

如果要重复内容，请使用template标签，并*删除ngFor.

根据Victor Savkin关于ngForand的说法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>行为与 the 相同，<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>
于 2015-12-30T16:32:36.347 回答
4

在较新的版本中，它的工作方式如下：

<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

于 2016-05-17T12:39:42.953 回答
2

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

阅读Angular.io 指南中模板语法中的星号可为您提供线索。

这解决了它：

<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>
于 2015-12-30T16:56:56.393 回答
1

使用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>
于 2018-03-16T04:45:06.493 回答