Ng-repeat-start в angular2 - повторение нескольких элементов с использованием NgFor

Мне нужно повторить несколько li -элементов в списке в Angular2 для каждого элемента. В angular 1.x я использовал ng-repeat-start и ng-repeat-end для этого. Я не могу найти правильный способ сделать это в angular 2. Есть несколько старых сообщений в блоге об этом, но их предложения не работают в новейшей версии beta 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>

Ответ 1

Если вы хотите повторить содержимое, используйте тег template и удалите префикс * на ngFor.

Согласно Виктор Савкин на 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>

Ответ 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

Ответ 3

Спасибо за ваши усилия, 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>