web-dev-qa-db-ger.com

Winkel 2: Wie schreibt man eine for-Schleife, keine foreach-Schleife

Mit Angular 2 möchte ich eine Linie in einer Vorlage mehrmals duplizieren. Ein Objekt zu iterieren ist einfach, *ngFor="#object of objects". Ich möchte jedoch eine einfache for-Schleife ausführen, keine foreach-Schleife. So etwas (Pseudo-Code):

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

Wie würde ich das machen?

angularangular2-template
43
ebakunin

Sie könnten dynamisch ein Array mit der Zeit erzeugen, für die Sie <li>Something</li> rendern möchten, und dann ngFor für diese Sammlung ausführen. Sie können auch index des aktuellen Elements verwenden.

Markup

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

Unter der Haube hat winklig diese *ngFor-Syntax auf ng-template-Version zurückgesetzt.

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

Sie können beides in einem tun, wenn Sie index verwenden.

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

Damit können Sie das Beste aus beiden Welten bekommen.

28
TGH

Sie können ein leeres Array mit einer bestimmten Anzahl von Einträgen instanziieren, wenn Sie eine int an den Array-Konstruktor übergeben und diese dann über ngFor durchlaufen.

In Ihrem Komponentencode:

export class ForLoop {
  fakeArray = new Array(12);
}

In Ihrer Vorlage:

<ul>
  <li *ngFor="let a of fakeArray; let index = index">Something {{ index }}</li>
</ul>

Die Indexeigenschaften geben die Iterationsnummer an.

Live Version

18
Sbats

Abhängig von der Länge der gewünschten Schleife, möglicherweise sogar einer "Template-gesteuerten" Lösung

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

Der bessere Weg dazu ist das Erstellen eines gefälschten Arrays in der Komponente: 

In der Komponente: 

fakeArray = new Array(12);

InTemplate:

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

Plunkr hier

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

Bereich min und max anzahl

0
raj bluecloud

Wenn Sie das Objekt des ith-Ausdrucks verwenden und in jeder Iteration in eine andere Komponente eingeben möchten, gilt Folgendes:

<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

sie können _.range([optional] start, end) verwenden. Es erstellt eine neue Minified-Liste mit einem Nummernintervall vom Start (inklusive) bis zum Ende (exklusiv). Hier verwende ich die lodash.js ._range() Methode.

Beispiel:

CODE

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

//HTMLJetzt können Sie es in der For-Schleife verwenden

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