web-dev-qa-db-fra.com

Ng-repeat-start dans angular2 - alias répéter plusieurs éléments en utilisant NgFor

J'ai besoin de répéter plusieurs éléments li- dans une liste en Angular2 pour chaque élément. Dans angular 1.x j'ai utilisé ng-repeat-start et ng-repeat-end pour ça. Je ne trouve pas la bonne façon de le faire dans Angular 2. Il y a certains anciens articles de blog à ce sujet, mais leurs suggestions ne fonctionnent pas dans les plus récents bêta d'Angular2.

Tout <li>- les éléments doivent être répétés pour chaque catégorie: (ce que je ferais normalement avec l'attribut *ngFor="#category of categories" - mais je ne trouve pas où le mettre ...

Aidez-moi?

<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>
angularangular2-template
25
skovmand

Si vous souhaitez répéter le contenu, utilisez la balise template et supprimez la * préfixe sur ngFor.

Selon Victor Savkin sur ngFor et templates:

Angular traite les éléments du modèle d'une manière spéciale. Ils sont utilisés pour créer des vues, des morceaux de DOM que vous pouvez manipuler dynamiquement. La syntaxe * est un raccourci qui vous permet d'éviter d'écrire l'élément entier.

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

Mise à jour angular ^ 2.0.0

Vous pouvez utiliser ng-container et changez simplement #var à let var.

<ng-container> se comporte de la même manière que le <template> mais permet d'utiliser la syntaxe la plus courante.

<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>
52
pixelbits

Dans les versions plus récentes, cela fonctionne comme ceci:

<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 au lieu de # category

4
user1879408

Merci pour vos efforts, pixelbits, mais la réponse était différente.

La lecture de l'astérisque dans Syntaxe du modèle dans les guides Angular.io vous donne l'indice.

Cela l'a résolu:

<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>
2
skovmand

Fonctionné avec 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>
1
Rahmathullah M