...例えば...

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

次のようなことが可能です...

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

...次のような非エレガントなソリューションにアピールすることなく：

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

？

以下のように、コンポーネント内で数値の配列（ES6）を定義できます。

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

配列の作成については、このリンクを参照してください。JavaScriptで1..20から整数の配列を作成する最も簡単な方法。

次に、この配列を次のように反復できますngFor。

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

またはまもなく：

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

@OP、あなたはあなたの「エレガントでない」ソリューションにひどく近かったです。

どうですか：

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

ここで私は取得していますArray：空の配列からコンストラクタを[].constructorするので、Arrayテンプレート構文で認められたシンボルではない、と私はやるのが面倒だArray=Arrayか、counter = Array彼の第四の例でやった@ pardeep、ジャイナ教のようなコンポーネントtypescriptですインチ そして、配列を取得するために必要ではないnewので、私はそれなしでそれを呼び出しnewていますArrayコンストラクターます。

Array(30)とnew Array(30)同等です。

配列は空になりますが、ループ内でifrom を使用したいだけなので、問題はありません;let i = index。

コレクションではなく数値を使用するNgForのメソッドはまだありません。現時点では、* ngForはコレクションをパラメーターとしてのみ受け入れますが、次の方法でこれを行うことができます。

パイプを使用

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>

HTML（View）で数値配列を直接使用する

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

Splitメソッドの使用

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

コンポーネントでの新しい配列の作成の使用

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

作業デモ

コンポーネントの単純な繰り返しに配列を割り当てるという考えには耐えられなかったので、構造ディレクティブを記述しました。最も単純な形式では、テンプレートでインデックスを使用できません。次のようになります。

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

Angular 5.2.6と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);
}

次のようなコンポーネントで使用できます。

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

簡潔にするために、意図的にエラーチェックとアサーションを省略しました（たとえば、ステップが負の場合にどうなるか）。

そのように使うこともできます

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>

あなたは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);
}

コードはテストしていませんが、動作するはずです。

これは次のようにして達成することもできます：

HTML：

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

タイプスクリプト：

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

作業デモ

引数なしのfill（）メソッド（受け入れられた回答で説明）はエラーをスローするため、次のようなものを提案します（私にとっては、Angular 7.0.4、Typescript 3.1.6で機能します）。

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

コンポーネントコード：

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

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

これは、myCollectionで何度も繰り返す、素晴らしくて迅速な方法です。

したがって、myCollectionが5の場合、Hello Worldは5回繰り返されます。

インデックスでカスタム構造ディレクティブを使用する：

Angularのドキュメントによると：

createEmbeddedView 埋め込みビューをインスタンス化し、このコンテナに挿入します。

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.

angularがcreateEmbeddedViewを呼び出してテンプレートを作成する場合、内部で使用されるコンテキストを渡すこともできますng-template。

コンテキストオプションパラメーターを使用して、コンポーネントで使用し、* 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));
  }
}

ボタンをクリックした後に配列のサイズを動的に増やしたい場合は、添付の動的ソリューションを見つけてください（これが私がこの質問にたどり着いた方法です）。

必要な変数の割り当て：

  array = [1];
  arraySize: number;

配列に要素を追加する関数を宣言します。

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

HTMLで関数を呼び出す

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

ngForを使用して配列を反復処理します。

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

私が試した最も簡単な方法

コンポーネントファイルに配列を作成することもできます。配列として返すことにより、* ngForディレクティブを使用してそれを呼び出すことができます。

このようなもの ....

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

}

そして、この関数はあなたのhtmlテンプレートファイルで使用できます

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

私の解決策：

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

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>