web-dev-qa-db-fra.com

Angular 2: comment écrire une boucle for, pas une boucle foreach

En utilisant Angular 2, je souhaite dupliquer une ligne dans un modèle plusieurs fois. Itérer sur un objet est facile, *ngFor="#object of objects". Cependant, je veux exécuter une boucle for simple, pas une boucle foreach. Quelque chose comme (pseudo-code):

{for i = 0; i < 5; i++}
  <li>Something</li>
{endfor}

Comment je ferais ça?

angularangular2-template
43
ebakunin

Vous pouvez générer dynamiquement un tableau de l'heure à laquelle vous souhaitez rendre <li>Something</li>, puis créer ngFor sur cette collection. Vous pouvez aussi utiliser index de l'élément courant également.

Balisage

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

Demo Here

Sous le capot, angular a converti cette syntaxe *ngFor en version ng-template.

<ul>
    <ng-template ngFor let-item [ngForOf]="createRange(5)" let-currentElementIndex="(index + 1)" [ngForTrackBy]="trackByFn">
      {{currentElementIndex}} Something
    </ng-template>
</ul>
54
Pankaj Parkar

Vous pouvez faire les deux en un si vous utilisez index

<div *ngFor="let item of items; let myIndex = index>
  {{myIndex}}
</div>

Avec cela, vous pouvez obtenir le meilleur des deux mondes.

28
TGH

Vous pouvez instancier un tableau vide avec un nombre donné d'entrées si vous passez une variable int au constructeur Array, puis parcourez-la 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.

Version live

18
Sbats

En fonction de la longueur de la boucle souhaitée, peut-être même une solution plus "orientée modèle":

<ul>
  <li *ngFor="let index of [0,1,2,3,4,5]">
    {{ index }}
  </li>
</ul>
13
denu5

La meilleure façon de faire est de créer un faux tableau dans le composant: 

En composant: 

fakeArray = new Array(12);

InTemplate:

<ng-container *ngFor = "let n of fakeArray">
     MyCONTENT
</ng-container>

Plunkr ici

3
Deepak Sharma
   queNumMin = 23;
   queNumMax= 26;
   result = 0;
for (let index = this.queNumMin; index <= this.queNumMax; index++) {
         this.result = index
         console.log( this.result);
     }

Plage min et max nombre

0
raj bluecloud

Si vous voulez utiliser l'objet de son terme et le saisir 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>
0
Ayush Lal Shrestha

vous pouvez utiliser _.range([optional] start, end). Il crée une nouvelle liste Minifiée contenant un intervalle de nombres allant du début (inclus) à la fin (exclusif). Ici, j'utilise la méthode lodash.js ._range().

Exemple:

CODE

var dayOfMonth = _.range(1,32);  // It creates a new list from 1 to 31.

//HTMLMaintenant, vous pouvez l'utiliser dans la boucle For

<div *ngFor="let day of dayOfMonth">{{day}}</div>
0
Ajay Gupta