Angular2中的Ng-repeat-start-也使用NgFor重复多个元素

skovmand 发表于 Dev

森林人

我需要li为每个项目在Angular2的列表中重复几个元素。在角的1.x我用ng-repeat-start和ng-repeat-end这个。我在Angular 2中找不到正确的方法。有一些与此相关的较早的博客文章，但是他们的建议在Angular2的最新Beta中不起作用。

<li>对于每个类别，应重复所有-elements ：（我通常会使用该属性*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>

像素位

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

据维克多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>

更新角度^ 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。