.．.例如……
<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>
?
当前回答
我认为简单而简短的解决办法就在这里。
你的my.component.ts文件
setArrayFromNumber(i: number) {
return new Array(i);
}
你的my.component.html文件
<li *ngFor='let in of setArrayFromNumber(5); let i = index'>{{ i }}</li>
就是这样! !
其他回答
这是我试过的最简单的方法
你也可以在你的组件文件中创建一个数组，你可以用*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>
你可以使用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);
使用管道将数字转换为数组。
@Pipe({
name: 'enumerate',
})
export class EnumeratePipe implements PipeTransform {
transform(n: number): number[] {
return [...Array(n)].map((_,i) => i);
}
}
然后在模板中使用管道。
<p *ngFor="let i of 5 | enumerate">
Index: {{ i }}
</p>
https://stackblitz.com/edit/angular-ivy-pkwvyw?file=src/app/app.component.html
