.．.例如……
<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
numbers: number[] = [];
constructor() {
this.numbers = new Array<number>(10)
}
My-component.html
<div *ngFor="let num of numbers; let i = index">{{ i }}</div>
其他回答
你也可以用like that
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>
这是我试过的最简单的方法
你也可以在你的组件文件中创建一个数组，你可以用*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>
下面是Angular的一些非常干净和简单的东西:
在.ts:
max = 10;
. html:
<div *ngFor="let dummy of ','.repeat(max).split(','); index as ix">
- {{ix + 1}}:
</div>
在你的组件中，你可以定义一个number (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]
}
}
查看这个链接来创建数组:用最简洁的方法从1..JavaScript 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 {
(...)
}
我认为简单而简短的解决办法就在这里。
你的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>
就是这样! !
