Angulaire 2: Comment écrire une boucle for, pas une boucle foreach
en utilisant L'angle 2, je veux dupliquer une ligne dans un modèle plusieurs fois. Une itération sur un objet est facile, *ngFor="#object of objects". Cependant, je veux exécuter un simple for boucle, pas un foreach boucle. Quelque chose comme (pseudo-code):
{for i = 0; i < 5; i++}
<li>Something</li>
{endfor}
comment je ferais ça?
8 réponses
mise à Jour
NgFor L'API a été dépréciée, utilisez-la avec la combinaison de ngForOf directive avec ng-template.
<ul>
<ng-template ngFor let-item [ngForOf]="createRange(5)" let-currentElementIndex="(index + 1)" [ngForTrackBy]="trackByFn">
{{currentElementIndex}} Something
</ng-template>
</ul>
vous pouvez générer dynamiquement un tableau de la façon dont le temps que vous voulez rendre <li>Something</li>, et ensuite faire ngFor sur cette collection. Vous pouvez également utiliser index de l'élément courant trop.
Balise
<ul>
<li *ngFor="let item of createRange(5); let currentElementIndex=index+1">
{{currentElementIndex}} Something
</li>
</ul>
Code
createRange(number){
var items: number[] = [];
for(var i = 1; i <= number; i++){
items.push(i);
}
return items;
}
<div *ngFor="let item of items; let myIndex = index>
{{myIndex}}
</div>
Avec cela, vous pouvez obtenir le meilleur des deux mondes.
Vous pouvez instancier un tableau vide avec un nombre d'entrées si vous passez un intArray constructeur et parcourir via ngFor.
Dans votre code de composant :
export class ForLoop {
fakeArray = new Array(12);
}
dans votre modèle:
<ul>
<li *ngFor="let a of fakeArray; let index = index">Something {{ index }}</li>
</ul>
les propriétés de l'index vous donnent le numéro d'itération.
selon la longueur de la boucle désirée, peut-être même une solution plus "template-driven":
<ul>
<li *ngFor="let index of [0,1,2,3,4,5]">
{{ index }}
</li>
</ul>
la meilleure façon de faire ceci est de créer un tableau faux dans le component:
Dans La Composante:
fakeArray = new Array(12);
InTemplate:
<ng-container *ngFor = "let n of fakeArray">
MyCONTENT
</ng-container>
vous pouvez utiliser _.range([optional] start, end). Il crée une nouvelle liste réduite contenant un intervalle de nombres du début (inclus) jusqu'à la fin (exclusif).
(* aucune importation requise)
Exemple:
CODE
var dayOfMonth = _.range(1,32); // It creates a new list from 1 to 31.
//HTML Maintenant, vous pouvez l'utiliser dans la boucle For
<div *ngFor="let day of dayOfMonth">{{day}}</div>
si vous voulez utiliser l'objet du terme IW et l'entrer dans un autre composant à chaque itération alors:
<table class="table table-striped table-hover">
<tr>
<th> Blogs </th>
</tr>
<tr *ngFor="let blogEl of blogs">
<app-blog-item [blog]="blogEl"> </app-blog-item>
</tr>
</table>
queNumMin = 23;
queNumMax= 26;
result = 0;
for (let index = this.queNumMin; index <= this.queNumMax; index++) {
this.result = index
console.log( this.result);
}
Portée min et max nombre