... 예를 들어 ...

<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그의 4 예에서와 @ pardeep - 자이나교와 같은 구성 요소 타이프 라이터이다. 그리고 배열을 생성자 밖으로 가져올 필요가 new없기 때문에 없이 호출합니다 .newArray

Array(30)그리고 new Array(30)동등합니다.

배열은 비어있을 것입니다,하지만 당신은 정말 그냥 사용하기를 원하기 때문에이 문제가되지 않습니다 i에서 ;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에서 직접 숫자 배열 사용 (보기)

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

분할 방법 사용

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