Angular 2
Angulaire - ForLoop
Recherche…
Syntaxe
- <div * ngFor = "laisser un élément d’élément; laisser i = index"> {{i}} {{item}} </ div>
Remarques
La directive structurelle *ngFor s'exécute en tant que boucle dans une collection et répète un morceau de code HTML pour chaque élément d'une collection.
@View décorateur @View est maintenant obsolète. Les développeurs doivent utiliser les propriétés template ou 'templateUrl' pour le décorateur @Component .
Angulaire 2 pour boucle
Pour vivre, cliquez sur ...
<!doctype html>
<html>
<head>
<title>ng for loop in angular 2 with ES5.</title>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script>
<script>
var ngForLoop = function () {
this.msg = "ng for loop in angular 2 with ES5.";
this.users = ["Anil Singh", "Sunil Singh", "Sushil Singh", "Aradhya", 'Reena'];
};
ngForLoop.annotations = [
new angular.Component({
selector: 'ngforloop'
}),
new angular.View({
template: '<H1>{{msg}}</H1>' +
'<p> User List : </p>' +
'<ul>' +
'<li *ng-for="let user of users">' +
'{{user}}' +
'</li>' +
'</ul>',
directives: [angular.NgFor]
})
];
document.addEventListener("DOMContentLoaded", function () {
angular.bootstrap(ngForLoop);
});
</script>
</head>
<body>
<ngforloop></ngforloop>
<h2>
<a href="http://www.code-sample.com/" target="_blank">For more detail...</a>
</h2>
</body>
</html>
NgFor - Markup For Loop
La directive NgFor instancie un modèle une fois par article à partir d'une itération. Le contexte de chaque modèle instancié hérite du contexte externe, la variable de boucle donnée étant définie sur l'élément actuel à partir de l'itérable.
Pour personnaliser l'algorithme de suivi par défaut, NgFor prend en charge l' option trackBy . trackBy prend une fonction qui a deux arguments: index et item. Si trackBy est donné, les pistes angulaires sont modifiées par la valeur de retour de la fonction.
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
{{i}} - {{item.name}}
</li>
Options supplémentaires : NgFor fournit plusieurs valeurs exportées pouvant être associées à des variables locales:
- index sera défini sur l'itération de boucle en cours pour chaque contexte de modèle.
- La valeur booléenne indique si l'élément est le premier de l'itération.
- last sera défini sur une valeur booléenne indiquant si l'élément est le dernier de l'itération.
- even sera mis à une valeur booléenne indiquant si cet élément a un index pair.
- odd sera mis à une valeur booléenne indiquant si cet élément a un index impair.
* ngPour les lignes de table
<table>
<thead>
<th>Name</th>
<th>Index</th>
</thead>
<tbody>
<tr *ngFor="let hero of heroes">
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>
* ngPour le composant
@Component({
selector: 'main-component',
template: '<example-component
*ngFor="let hero of heroes"
[hero]="hero"></example-component>'
})
@Component({
selector: 'example-component',
template: '<div>{{hero?.name}}</div>'
})
export class ExampleComponent {
@Input() hero : Hero = null;
}
* ngPour X quantité d'éléments par ligne
L'exemple montre 5 articles par ligne:
<div *ngFor="let item of items; let i = index">
<div *ngIf="i % 5 == 0" class="row">
{{ item }}
<div *ngIf="i + 1 < items.length">{{ items[i + 1] }}</div>
<div *ngIf="i + 2 < items.length">{{ items[i + 2] }}</div>
<div *ngIf="i + 3 < items.length">{{ items[i + 3] }}</div>
<div *ngIf="i + 4 < items.length">{{ items[i + 4] }}</div>
</div>
</div>