在Angular2中使用ng-repeat-start - 即使用NgFor重复多个元素

Question

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

- skovmand

Answer 1

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

根据Victor Savkin关于ngFor和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>

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

- pixelbits

---

是的，但我需要为每个类别重复所有五个 <li>，而且我不能放一个 <div> 来包裹它们，否则会破坏列表... - skovmand

你放置的 <li *ngFor="#tag of category.tags"> ... </li> 是第一个循环内的另一个重复，这应该可以正常工作。 - skovmand

针对您的编辑：我不希望<ul>重复出现，只需要其中的内容。 - skovmand

也许应该这样写: <template ngFor #category [ngForOf]="categories"> - Lodewijk Bogaards

这个还是像（2.0.0-rc.1）那样工作吗？我无法在循环内访问类别的属性。 - user1879408

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>

--> 使用let-category代替#category

- user1879408

Answer 3

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

通过阅读Angular.io指南中的模板语法的星号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> 

- skovmand

---

只是提供信息，NgFor API文档也展示了<template ngFor #item [ngForOf]="items">...</template>的语法。很遗憾他们没有强调这个语法必须用于重复多个元素。 - Mark Rajcok

感谢您的提示。 - skovmand

这个语法在 Angular 4.x.x 中不再适用了，对吧？只能使用 let。 - Francisco Neto

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>

- Rahmathullah M