...例如......
<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>
答案 0 :(得分：148)
在您的组件中，您可以定义一个数字数组（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]
}
}
请参阅此链接以获取阵列：Tersest way to create an array of integers from 1..20 in JavaScript。
然后，您可以使用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 {
(...)
}
答案 1 :(得分：62)
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>
<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);
}
}
答案 2 :(得分：28)
@OP，您与“非优雅”解决方案非常接近。
怎么样：
<div class="month" *ngFor="let item of [].constructor(10); let i = index">
...
</div>
在这里，我从一个空数组Array中获得了[].constructor构造函数，因为Array在模板语法中不是公认的符号，我太懒了在组件打字稿中执行Array=Array或counter = Array，就像@ pardeep-jain在他的第四个示例中所做的那样。而且我在没有new的情况下调用它是因为new对于从Array构造函数中获取数组不是必需的。
Array(30)和new Array(30)是等效的。
该数组将为空，但这没关系，因为您真的只想在循环中使用i中的;let i = index。
答案 3 :(得分：10)
我无法承受为明确重复组件分配数组的想法，所以我写了一个结构指令。在最简单的形式中，这不会使索引可用于模板，它看起来像这样：
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);
}
}
}
答案 4 :(得分：4)
你可以使用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);
}
我没有测试代码但它应该可以工作。
答案 5 :(得分：4)
我使用Angular 5.2.6和TypeScript 2.6.2解决了这个问题：
@Component({
template: `<div *ngFor="let i of r">{{ i }}</div>`
})
class RangeTestComponent {
public r = range(10, 20);
}
它可以在像这样的组件中使用：
{{1}}
为简洁起见，错误检查和断言是故意省略的（例如，如果步骤为负则会发生什么）。
答案 6 :(得分：1)
您也可以这样使用
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>
答案 7 :(得分：0)
如果你想在点击一个按钮后动态增加一个数组的大小，请找到我附带的动态解决方案（这就是我对这个问题的看法）。
分配必要的变量：
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>
答案 8 :(得分：0)
我尝试过的最简单方法
您也可以在组件文件中创建一个数组，然后可以通过返回数组来使用* 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>
答案 9 :(得分：0)
我的解决方案：
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>
答案 10 :(得分：0)
由于不带参数的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);
答案 11 :(得分：0)
这也可以像这样实现：
HTML：
<div *ngFor="let item of fakeArray(10)">
...
</div>
打字稿：
fakeArray(length: number): Array<any> {
if (length >= 0) {
return new Array(length);
}
}
答案 12 :(得分：0)
<div *ngFor="let number of [].constructor(myCollection)">
<div>
Hello World
</div>
</div>
这是重复myCollection中的次数的好方法。
因此，如果myCollection为5，则Hello World将重复5次。
答案 13 :(得分：0)
根据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));
}
}
答案 14 :(得分：0)
使用管道将数字转换为可迭代的数字。
@Pipe({
name: 'iterable',
})
export class IterablePipe implements PipeTransform {
transform(value: n): undefined[] {
return [...Array(n)];
}
}
然后使用模板中的管道
<p *ngFor="let _ of 5 | iterable">
Printed 5 times.
</p>