Угловое 2 - NgFor с использованием номеров вместо коллекций

Question

... к примеру ...

<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> 

?

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] 
    } 
} 

Смотрите эту ссылку для создания массива: Tersest way to create an array of integers from 1..20 in JavaScript.

Вы не можете перебрать этот массив с 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 { 
    (...) 
} 

Answer 2

Нет там нет методы пока для NgFor с использованием цифр вместо коллекций, На данный момент * ngFor принимает только коллекцию в качестве параметра, но вы можете сделать это следующими способами:

Использование трубы

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> 

Использование Split метод

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

Использование создания нового массива в компоненте

<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

Я не мог вынести мысль о выделении массива для простого повторения компонентов, поэтому я написал структурную директиву. В простейшей форме, что не делает индекс доступным для шаблона, он выглядит следующим образом:

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

Я не проверял кода, но он должен работать.

Answer 5

Пожалуйста, найдите прилагаемое мое динамическое решение, если вы хотите увеличить размер массива динамически после нажатия на кнопку (вот как я дошел до этого вопроса).

Распределение необходимых переменных:

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> 

Answer 6

Я решил это так, используя Угловой 5.2.6 и 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); 
} 

Проверка ошибок и утверждения опущены с целью краткости (например, что произойдет, если шаг отрицательный).