Ng-repeat-start dans angular2 - aka répéter plusieurs éléments en utilisant NgFor
J'ai besoin de répéter plusieurs li-éléments dans une liste Angular2 pour chaque élément. Dans angulaire 1.x j'ai utilisé ng-repeat-start et ng-repeat-end pour ce. Je ne trouve pas la bonne façon de le faire dans Angular 2. Il y a quelques anciens articles de blog à ce sujet, mais leurs suggestions ne fonctionnent pas dans la nouvelle version bêta D'Angular2.
Tous les <li>-é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...
Aide?
<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>
4 réponses
Si vous voulez répéter le contenu, utilisez la balise template et supprimez le 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éez des vues, des morceaux de DOM que vous pouvez manipuler dynamiquement. Le * la syntaxe est un raccourci qui vous permet d'éviter d'écrire le tout élément.
<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 angulaire ^2.0.0
, Vous pouvez utiliser ng-container et changez simplement #var en 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>
Dans les nouvelles versions, 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>
--> laissez-catégorie au lieu de #catégorie
Merci pour vos efforts, pixelbits, mais la réponse était différente.
Lecture de l'astérisque dans la syntaxe du modèle Angular.io guides 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>
Travaillé 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>