Angular 2 – NgFor使用数字，而不是集合

…例如…

<div class="month" *ngFor="#item of myCollection; #i = index"> ... </div> 

有可能做一些像…

 <div class="month" *ngFor="#item of 10; #i = index"> ... </div> 

…没有吸引力的非优雅的解决scheme，如：

 <div class="month" *ngFor="#item of ['dummy','dummy','dummy','dummy','dummy', 'dummy','dummy','dummy']; #i = index"> ... </div> 

？

Answer 1

在你的组件中，你可以定义一个数组（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] } } 

请参阅此链接以创build数组：使用JavaScript从1..20创build一个整数数组的方法 。

然后你可以使用ngFor迭代这个数组：

 @Component({ template: ` <ul> <li *ngFor="#number of numbers">{{number}}</li> </ul> ` }) export class SampleComponent { (...) } 

或者很快：

 @Component({ template: ` <ul> <li *ngFor="#number of [0,1,2,3,4]">{{number}}</li> </ul> ` }) export class SampleComponent { (...) } 

Answer 2

不，现在还没有办法让NgFor使用数字来代替集合，现在，* ngFor只接受一个集合作为参数，但是可以通过以下方法来实现：

使用pipe道

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='#key of 5 | demoNumber'> {{key}} </li> </ul> 

在HTML中直接使用数组（View）

 <ul> <li>Method Second</li> <li *ngFor='#key of [1,2]'> {{key}} </li> </ul> 

使用拆分方法

 <ul> <li>Method Third</li> <li *ngFor='#loop2 of "0123".split("")'>{{loop2}}</li> </ul> 

在组件中使用创build新的数组

 <ul> <li>Method Fourth</li> <li *ngFor='#loop3 of counter(5) ;#i= index'>{{i}}</li> </ul> export class AppComponent { demoNumber = 5 ; counter = Array; numberReturn(length){ return new Array(length); } } 

这是同样的工作演示 –

http://plnkr.co/edit/ynH8Xzh12VoeYpmMR1YN?p=preview

Answer 3

我无法忍受分配数组的简单重复的想法，所以我写了一个结构指令。 最简单的forms，这不会使索引可用于模板，它看起来像这样：

 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

Answer 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); } 

我没有testing代码，但它应该工作。

Answer 5

如果你想在点击一个button后dynamic增加数组的大小，请find附加的dynamic解决scheme（这是我如何解决这个问题）。

必要variables的分配：

  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>