Angular 2: Hoe schrijf je een for-lus, geen foreach-lus

Met Angular 2 wil ik een regel in een sjabloon meerdere keren dupliceren. Itereren over een object is eenvoudig, *ngFor="let object of objects". Ik wil echter een eenvoudige for-lus uitvoeren, geen foreach-lus. Iets als (pseudo-code):

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

Hoe zou ik dit doen?

Antwoord 1, autoriteit 100%

U kunt een lege array met een bepaald aantal items instantiëren als u een intdoorgeeft aan de Array-constructor en deze vervolgens herhaalt via ngFor.

In uw componentcode:

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

In uw sjabloon:

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

De indexeigenschappen geven u het iteratienummer.

Live-versie

Antwoord 2, autoriteit 94%

Je zou dynamisch een array kunnen genereren van de tijd die je wilde om <li>Something</li>weer te geven, en dan ngForover die verzameling doen. Je zou ook gebruik kunnen maken van indexvan het huidige element.

Mark-up

<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

Onder de motorkap heeft deze *ngFor-syntaxis onder de motorkap hoekig ontsuikerd tot een ng-template-versie.

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

Antwoord 3, autoriteit 89%

Je kunt beide in één doen als je index

gebruikt

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

Hiermee kun je het beste van twee werelden krijgen.

Antwoord 4, autoriteit 74%

Afhankelijk van de lengte van de gewenste lus, misschien zelfs een meer “sjabloongestuurde” oplossing:

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

Antwoord 5, autoriteit 11%

De betere manier om dit te doen is door een nep-array te maken in component:

In component:

fakeArray = new Array(12);

InTemplate:

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

Plunkr hier

Antwoord 6, autoriteit 3%

je kunt _.range([optional] start, end)gebruiken. Het creëert een nieuwe Verkleinde lijst met een interval van getallen van begin (inclusief) tot het einde (exclusief). Hier gebruik ik de lodash.js ._range()methode.

Voorbeeld:

CODE

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

//HTMLNu kun je het gebruiken in For-loop

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

Antwoord 7

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

Bereik min en max aantal

Antwoord 8

Als je het object van de term wilt gebruiken en het in elke iteratie in een andere component wilt invoeren, dan:

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

Antwoord 9

Je kunt gewoon doen:-

{{"<li>Something</li>".repeat(5)}}