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

18

Мне нужно повторить несколько li -элементов в списке в Angular2 для каждого элемента. В угловом 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 30.12.2015 в 17:22
источник

4 ответа

39

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

Согласно Виктор Савкин на ngFor и templates :

  

Угловые обрабатывают элементы шаблона особым образом. Они используются для   создавать представления, куски 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>
    
ответ дан pixelbits 30.12.2015 в 17:32
источник
  • Да, но мне нужно повторить все пять <li> для каждой категории, и я не могу поместить <div> внутрь, чтобы обернуть их, не уничтожая список ... –  skovmand 30.12.2015 в 17:33
  • <li * ngFor="# tag of category.tags"> ... </li>, который вы вводите, - это еще один повтор внутри первого повтора, который должен хорошо работать. –  skovmand 30.12.2015 в 17:35
  • Если вы поместите родительский ngFor в тег <ul>, он повторит категории. –  pixelbits 30.12.2015 в 17:39
  • Для вашего редактирования: я не хочу, чтобы <ul> повторялся. Только его содержимое –  skovmand 30.12.2015 в 17:39
  • Спасибо за ваши усилия .. Для последнего редактирования: он не отображает ... –  skovmand 30.12.2015 в 17:48
Показать остальные комментарии
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>

- & GT; let-category вместо #category

    
ответ дан user1879408 17.05.2016 в 14:39
источник
  • let-category работает в angular2.0.0-rc.1 для меня! –  Sameer 28.05.2016 в 00:58
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> 
    
ответ дан skovmand 30.12.2015 в 17:56
источник
  • Просто FYI, API-интерфейс NgFor API также показывает синтаксис <template ngFor #item [ngForOf]="items"> ... </template>. Слишком плохо, что они не подчеркивают тот факт, что этот синтаксис должен использоваться для повторения нескольких элементов. –  Mark Rajcok 30.12.2015 в 18:11
  • Спасибо за эту заметку –  skovmand 30.12.2015 в 22:53
  • Этот синтаксис больше не работает в угловом 4.x.x, правые парни? только пусть –  Francisco Neto 04.07.2017 в 11:00
0

Работает с 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 16.03.2018 в 05:45
источник