...beispielsweise...

<div class="month" *ngFor="#item of myCollection; #i = index">
...
</div>

Ist möglich so etwas wie ...

<div class="month" *ngFor="#item of 10; #i = index">
...
</div>

... ohne Appell an eine nicht elegante Lösung wie:

<div class="month" *ngFor="#item of ['dummy','dummy','dummy','dummy','dummy',
'dummy','dummy','dummy']; #i = index">
...
</div>

?

Innerhalb Ihrer Komponente können Sie ein Array von Zahlen (ES6) wie folgt definieren:

export class SampleComponent {
  constructor() {
    this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4]
    this.numbers = Array(5).fill(4); // [4,4,4,4,4]
  }
}

Informationen zur Array-Erstellung finden Sie unter diesem Link: Die engste Methode zum Erstellen eines Arrays von Ganzzahlen aus 1..20 in JavaScript .

Sie können dann über dieses Array iterieren mit ngFor:

@Component({
  template: `
    <ul>
      <li *ngFor="let number of numbers">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

Oder kurz:

@Component({
  template: `
    <ul>
      <li *ngFor="let number of [0,1,2,3,4]">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

@OP, Sie waren mit Ihrer "nicht eleganten" Lösung furchtbar nah dran.

Wie wäre es mit:

<div class="month" *ngFor="let item of [].constructor(10); let i = index"> ... </div>

Hier erhalte ich den ArrayKonstruktor aus einem leeren Array : [].constructor, weil Arrayes in der Vorlagensyntax kein erkanntes Symbol ist und ich zu faul bin, dies zu tun, Array=Arrayoder counter = Arrayim Komponententypskript, wie es @ pardeep-jain in seinem vierten Beispiel getan hat. Und ich rufe es ohne auf, newweil newes nicht notwendig ist, ein Array aus dem ArrayKonstruktor herauszuholen .

Array(30)und new Array(30)sind gleichwertig.

Das Array wird leer sein, aber das spielt keine Rolle , weil Sie wirklich nur verwenden möchten ivon ;let i = indexin der Schleife.

Nein, es gibt noch keine Methode für NgFor, bei der Zahlen anstelle von Sammlungen verwendet werden. Derzeit akzeptiert * ngFor nur eine Sammlung als Parameter. Sie können dies jedoch mit den folgenden Methoden tun:

Rohr verwenden

pipe.ts

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({name: 'demoNumber'})
export class DemoNumber implements PipeTransform {
  transform(value, args:string[]) : any {
    let res = [];
    for (let i = 0; i < value; i++) {
        res.push(i);
      }
      return res;
  }
}


<ul>
  <li>Method First Using PIPE</li>
  <li *ngFor='let key of 5 | demoNumber'>
    {{key}}
  </li>
</ul>

Verwenden des Zahlenarrays direkt in HTML (Ansicht)

<ul>
  <li>Method Second</li>
  <li *ngFor='let key of  [1,2]'>
    {{key}}
  </li>
</ul>

Verwenden der Split-Methode

<ul>
  <li>Method Third</li>
  <li *ngFor='let loop2 of "0123".split("")'>{{loop2}}</li>
</ul>

Verwenden des Erstellens eines neuen Arrays in einer Komponente

<ul>
  <li>Method Fourth</li>
  <li *ngFor='let loop3 of counter(5) ;let i= index'>{{i}}</li>
</ul>

export class AppComponent {
  demoNumber = 5 ;

  counter = Array;

  numberReturn(length){
    return new Array(length);
  }
}

Arbeitsdemo

Ich konnte die Idee nicht ertragen, ein Array für die einfache Wiederholung von Komponenten zuzuweisen, deshalb habe ich eine strukturelle Direktive geschrieben. In der einfachsten Form, die den Index für die Vorlage nicht verfügbar macht, sieht es folgendermaßen aus:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[biRepeat]' })
export class RepeatDirective {

  constructor( private templateRef: TemplateRef<any>,
             private viewContainer: ViewContainerRef) { }

  @Input('biRepeat') set count(c:number) {
    this.viewContainer.clear();
    for(var i=0;i<c;i++) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }
}

http://plnkr.co/edit/bzoNuL7w5Ub0H5MdYyFR?p=preview

Ich habe es so gelöst mit Angular 5.2.6 und TypeScript 2.6.2:

class Range implements Iterable<number> {
    constructor(
        public readonly low: number,
        public readonly high: number,
        public readonly step: number = 1
    ) {
    }

    *[Symbol.iterator]() {
        for (let x = this.low; x <= this.high; x += this.step) {
            yield x;
        }
    }
}

function range(low: number, high: number) {
    return new Range(low, high);
}

Es kann in einer Komponente wie der folgenden verwendet werden:

@Component({
    template: `<div *ngFor="let i of r">{{ i }}</div>`
})
class RangeTestComponent {
    public r = range(10, 20);
}

Fehlerprüfung und Behauptungen wurden der Kürze halber absichtlich weggelassen (z. B. was passiert, wenn der Schritt negativ ist).

Sie können auch so verwenden

export class SampleComponent {
   numbers:Array<any> = [];
   constructor() {
      this.numbers = Array.from({length:10},(v,k)=>k+1);
   }
}

HTML

<p *ngFor="let i of numbers">
   {{i}}
</p>

Sie können lodash verwenden:

@Component({
  selector: 'board',
  template: `
<div *ngFor="let i of range">
{{i}}
</div>
`,
  styleUrls: ['./board.component.css']
})
export class AppComponent implements OnInit {
  range = _.range(8);
}

Ich habe keinen Code getestet, aber es sollte funktionieren.

Dies kann auch folgendermaßen erreicht werden:

HTML:

<div *ngFor="let item of fakeArray(10)">
     ...
</div>

Typoskript:

fakeArray(length: number): Array<any> {
  if (length >= 0) {
    return new Array(length);
  }
}

Arbeitsdemo

Da die fill () -Methode (in der akzeptierten Antwort erwähnt) ohne Argumente einen Fehler auslöst, würde ich so etwas vorschlagen (funktioniert für mich, Angular 7.0.4, Typescript 3.1.6).

<div class="month" *ngFor="let item of items">
...
</div>

Im Komponentencode:

this.items = Array.from({length: 10}, (v, k) => k + 1);

<div *ngFor="let number of [].constructor(myCollection)">
    <div>
        Hello World
    </div>
</div>

Dies ist eine schöne und schnelle Möglichkeit, die Anzahl der Male in myCollection zu wiederholen.

Wenn myCollection also 5 wäre, würde Hello World 5 Mal wiederholt.

Verwenden einer benutzerdefinierten Strukturrichtlinie mit Index:

Laut Angular-Dokumentation:

createEmbeddedView Instanziiert eine eingebettete Ansicht und fügt sie in diesen Container ein.

abstract createEmbeddedView(templateRef: TemplateRef, context?: C, index?: number): EmbeddedViewRef.

Param          Type           Description
templateRef    TemplateRef    the HTML template that defines the view.
context        C              optional. Default is undefined.
index          number         the 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.

Wenn Angular eine Vorlage durch Aufrufen von createEmbeddedView erstellt, kann auch der Kontext übergeben werden, der im Inneren verwendet wird ng-template.

Mit dem optionalen Kontextparameter können Sie ihn in der Komponente verwenden und ihn wie mit * ngFor in der Vorlage extrahieren.

app.component.html:

<p *for="number; let i=index; let c=length; let f=first; let l=last; let e=even; let o=odd">
  item : {{i}} / {{c}}
  <b>
    {{f ? "First,": ""}}
    {{l? "Last,": ""}}
    {{e? "Even." : ""}}
    {{o? "Odd." : ""}}
  </b>
</p>

for.directive.ts:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

class Context {
  constructor(public index: number, public length: number) { }
  get even(): boolean { return this.index % 2 === 0; }
  get odd(): boolean { return this.index % 2 === 1; }
  get first(): boolean { return this.index === 0; }
  get last(): boolean { return this.index === this.length - 1; }
}

@Directive({
  selector: '[for]'
})
export class ForDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }

  @Input('for') set loop(num: number) {
    for (var i = 0; i < num; i++)
      this.viewContainer.createEmbeddedView(this.templateRef, new Context(i, num));
  }
}

Im Anhang finden Sie meine dynamische Lösung, wenn Sie die Größe eines Arrays nach dem Klicken auf eine Schaltfläche dynamisch erhöhen möchten (so bin ich zu dieser Frage gekommen).

Zuordnung der notwendigen Variablen:

  array = [1];
  arraySize: number;

Deklarieren Sie die Funktion, die dem Array ein Element hinzufügt:

increaseArrayElement() {
   this.arraySize = this.array[this.array.length - 1 ];
   this.arraySize += 1;
   this.array.push(this.arraySize);
   console.log(this.arraySize);
}

Rufen Sie die Funktion in HTML auf

  <button md-button (click)="increaseArrayElement()" >
      Add element to array
  </button>

Durch das Array mit ngFor iterieren:

<div *ngFor="let i of array" >
  iterateThroughArray: {{ i }}
</div>

Ein einfachster Weg, den ich versucht habe

Sie können auch ein Array in Ihrer Komponentendatei erstellen und es mit der Direktive * ngFor aufrufen, indem Sie als Array zurückkehren.

Etwas wie das ....

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-morning',
  templateUrl: './morning.component.html',
  styleUrls: ['./morning.component.css']
})
export class MorningComponent implements OnInit {

  arr = [];
  i: number = 0;
  arra() {
    for (this.i = 0; this.i < 20; this.i++) {
      this.arr[this.i]=this.i;
    }
    return this.arr;
  }

  constructor() { }

  ngOnInit() {
  }

}

Und diese Funktion kann in Ihrer HTML-Vorlagendatei verwendet werden

<p *ngFor="let a of arra(); let i= index">
value:{{a}} position:{{i}}
</p>

Meine Lösung:

export class DashboardManagementComponent implements OnInit {
  _cols = 5;
  _rows = 10;
  constructor() { }

  ngOnInit() {
  }

  get cols() {
    return Array(this._cols).fill(null).map((el, index) => index);
  }
  get rows() {
    return Array(this._rows).fill(null).map((el, index) => index);
  }

In HTML:

<div class="charts-setup">
  <div class="col" *ngFor="let col of cols; let colIdx = index">
    <div class="row" *ngFor="let row of rows; let rowIdx = index">
      Col: {{colIdx}}, row: {{rowIdx}}
    </div>
  </div>
</div>