.．.例如……
<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>
?
当前回答
<div *ngFor="let number of [].constructor(myCollection)">
<div>
Hello World
</div>
</div>
这是一个在myCollection中重复相同次数的好方法。
如果myCollection是5,Hello World会重复5次。
其他回答
我用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);
}
为了简洁，故意省略错误检查和断言(例如，如果step为负会发生什么)。
请找到附件我的动态解决方案，如果你想在点击按钮后动态增加数组的大小(这就是我如何得到这个问题)。
必要变量的分配:
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>
我认为简单而简短的解决办法就在这里。
你的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>
就是这样! !
你可以使用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);
}
我没有测试代码，但它应该工作。
使用管道将数字转换为数组。
@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
