.．.例如……
<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>
?
当前回答
下面是Angular的一些非常干净和简单的东西:
在.ts:
max = 10;
. html:
<div *ngFor="let dummy of ','.repeat(max).split(','); index as ix">
- {{ix + 1}}:
</div>
其他回答
<div *ngFor="let number of [].constructor(myCollection)">
<div>
Hello World
</div>
</div>
这是一个在myCollection中重复相同次数的好方法。
如果myCollection是5,Hello World会重复5次。
我认为简单而简短的解决办法就在这里。
你的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>
就是这样! !
我无法忍受为组件的简单重复分配数组的想法，所以我写了一个结构指令。在最简单的形式中，这并没有使索引对模板可用，它看起来像这样:
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
在你的组件中，你可以定义一个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 {
(...)
}
我用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为负会发生什么)。
