...par exemple...

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

Est-il possible de faire quelque chose comme ...

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

... sans appel à une solution non élégante comme:

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

?

Dans votre composant, vous pouvez définir un tableau de nombres (ES6) comme décrit ci-dessous:

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

Voir ce lien pour la création du tableau: Méthode d'essai pour créer un tableau d'entiers de 1..20 en JavaScript .

Vous pouvez ensuite parcourir ce tableau avec ngFor:

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

Ou brièvement:

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

@OP, vous étiez terriblement proche de votre solution "non élégante".

Que diriez-vous:

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

Ici, j'obtiens le Arrayconstructeur à partir d'un tableau vide:, [].constructorcar ce Arrayn'est pas un symbole reconnu dans la syntaxe du modèle, et je suis trop paresseux pour le faire Array=Arrayou counter = Arraydans le script de composant comme @ pardeep-jain l'a fait dans son 4ème exemple. Et je l'appelle sansnew parce que ce newn'est pas nécessaire pour sortir un tableauArray constructeur.

Array(30) et new Array(30) sont équivalents.

Le tableau sera vide, mais cela n'a pas d'importance car vous voulez vraiment utiliser ifrom ;let i = indexdans votre boucle.

Non, il n'y a pas encore de méthode pour NgFor utilisant des nombres à la place des collections, Pour le moment, * ngFor n'accepte qu'une collection en tant que paramètre, mais vous pouvez le faire en utilisant les méthodes suivantes:

Utilisation du tuyau

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>

Utilisation d'un tableau de nombres directement dans HTML (View)

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

Utilisation de la méthode Split

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

Utilisation de la création d'un nouveau tableau dans le composant

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

Démo de travail

Je ne pouvais pas supporter l'idée d'allouer un tableau pour la simple répétition des composants, j'ai donc écrit une directive structurelle. Dans sa forme la plus simple, cela ne rend pas l'index disponible pour le modèle, cela ressemble à ceci:

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

Je l'ai résolu comme ceci en utilisant Angular 5.2.6 et 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);
}

Il peut être utilisé dans un composant comme celui-ci:

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

Vérification des erreurs et affirmations omises volontairement par souci de concision (par exemple, que se passe-t-il si l'étape est négative).

vous pouvez aussi utiliser comme ça

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>

Vous pouvez utiliser lodash:

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

Je n'ai pas testé le code mais cela devrait fonctionner.

Ceci peut également être réalisé comme ceci:

HTML:

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

Manuscrit:

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

Démo de travail

Puisque la méthode fill () (mentionnée dans la réponse acceptée) sans arguments jette une erreur, je suggérerais quelque chose comme ça (fonctionne pour moi, Angular 7.0.4, Typescript 3.1.6)

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

Dans le code composant:

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

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

C'est un moyen agréable et rapide de répéter le nombre de fois dans myCollection.

Donc, si myCollection était de 5, Hello World serait répété 5 fois.

Utilisation de la directive structurelle personnalisée avec index:

Selon la documentation angulaire:

createEmbeddedView Instancie une vue intégrée et l'insère dans ce conteneur.

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.

Lorsque angular crée un modèle en appelant createEmbeddedView, il peut également transmettre le contexte qui sera utilisé à l'intérieur ng-template.

En utilisant le paramètre facultatif context, vous pouvez l'utiliser dans le composant, en l'extrayant dans le modèle comme vous le feriez avec le * ngFor.

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

Veuillez trouver ci-joint ma solution dynamique si vous souhaitez augmenter la taille d'un tableau de manière dynamique après avoir cliqué sur un bouton (c'est ainsi que je suis arrivé à cette question).

Attribution des variables nécessaires:

  array = [1];
  arraySize: number;

Déclarez la fonction qui ajoute un élément au tableau:

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

Appelez la fonction en html

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

Itérer à travers un tableau avec ngFor:

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

Un moyen le plus simple que j'ai essayé

Vous pouvez également créer un tableau dans votre fichier de composant et vous pouvez l'appeler avec la directive * ngFor en le renvoyant sous forme de tableau.

Quelque chose comme ça ....

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() {
  }

}

Et cette fonction peut être utilisée dans votre fichier de modèle html

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

Ma solution:

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

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