...на примере...
<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>
?
В компоненте, можно определить массив чисел (ЕС6), как описано ниже:
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]
}
}
Смотрите по этой ссылке для создания массива: https://stackoverflow.com/questions/6299500/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 {
(...)
}
Нет там пока никакой способ для NgFor, используя цифры вместо коллекций, На данный момент, *ngFor только принимает коллекцию в качестве параметра, но вы можете сделать это следующими методами:
трубы.ТС
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='let key of 5 | demoNumber'>
{{key}}
</li>
</ul>
<ul>
<li>Method Second</li>
<li *ngFor='let key of [1,2]'>
{{key}}
</li>
</ul>
<ul>
<li>Method Third</li>
<li *ngFor='let loop2 of "0123".split("")'>{{loop2}}</li>
</ul>
<ul>
<li>Method Fourth</li>
<li *ngFor='let loop3 of counter(5) ;let i= index'>{{i}}</li>
</ul>
export class AppComponent {
demoNumber = 5 ;
counter = Array;
numberReturn(length){
return new Array(length);
}
}
@ОП, вы были очень близки с Вашу "номера-элегантные и" решение.
Как насчет:
в <div с классом="в месяц" по *ngFor="Давайте пункт [].конструктор(10); пусть i = индекс" и> ... </див>
Здесь я'м становится конструктор массив
от пустой массив: [].конструктор
, потому что массив
это'т признанный символ в шаблоне синтаксис, и я'm слишком ленивы, чтобы делать массив=массив " или " счетчик = массив в компонент машинопись как @пардип-Джейн сделал в своей 4-й пример. И я'м назвав ее без
новый, потому что
новоеэто'т нужна, чтобы получить массив из
массив` конструктор.
Массив(30)
и новый массив(30)
эквивалентны.
Массив будет пуст, но это вовсе'т имеет значения, потому что вы просто хотите использовать я
от `;пусть i = индекс в цикле.
Я не мог'т нести идею выделить массив для простого повторения компонентов, поэтому я'вэ написано структурная директива. В простейшей форме, то это'т принять индекс к шаблону, это выглядит так:
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);
}
}
}
Я решил это с помощью угловых 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);
}
Проверка ошибок и утверждений опущены для краткости (например, что произойдет, если шаг отрицателен).
вы также можете использовать подобное
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>
Вы можете использовать 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);
}
Я не'тестовый код, но он должен работать.
Поскольку заполнить() метод (упоминается в принятой ответ) без аргументов выводит сообщение об ошибке, я бы посоветовал что-нибудь вроде этого (у меня работает, угловая 7.0.4, машинопись 3.1.6)
<div class="month" *ngFor="let item of items">
...
</div>
В коде компонента:
this.items = Array.from({length: 10}, (v, k) => k + 1);
<div *ngFor="let number of [].constructor(myCollection)">
<div>
Hello World
</div>
</div>
Это хороший и быстрый способ повторить на сумму раз в коллекции.
Так что если моя_коллекция был 5, Здравствуй, мир будет повторяться 5 раз.
По угловым документации:
<код>createEmbeddedView</код> создает внедренный вид и вставляет его в этот контейнер.
<код>аннотация createEmbeddedView<П>(templateRef: TemplateRef<П> контекст?: С, индекс?: количество): EmbeddedViewRef<П></код>.
Параметр Описание Тип templateRef TemplateRef шаблон HTML, который определяет вид. В контексте c опционально. По умолчанию неопределено. количество индекс индекс на основе 0, в которой можно вставить новый взгляд на этот контейнер. Если не указано, добавляет новый вид, как последняя запись.
Когда угловая создает шаблон, по телефону createEmbeddedView он также может передавать контекст, который будет использоваться внутри на <код>НГ-шаблон</код>.
Используя контексте необязательный параметр, вы можете использовать его в компоненте, разархивировав его в шаблон так же, как и с *ngFor.
app.component.html:
<p *for="number; let i=index; let c=length; let f=first; let l=last; let e=even; let o=odd">
item : {{i}} / {{c}}
<b>
{{f ? "First,": ""}}
{{l? "Last,": ""}}
{{e? "Even." : ""}}
{{o? "Odd." : ""}}
</b>
</p>
в
для.директива.ТС:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
class Context {
constructor(public index: number, public length: number) { }
get even(): boolean { return this.index % 2 === 0; }
get odd(): boolean { return this.index % 2 === 1; }
get first(): boolean { return this.index === 0; }
get last(): boolean { return this.index === this.length - 1; }
}
@Directive({
selector: '[for]'
})
export class ForDirective {
constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }
@Input('for') set loop(num: number) {
for (var i = 0; i < num; i++)
this.viewContainer.createEmbeddedView(this.templateRef, new Context(i, num));
}
}
Во вложении мой динамичное решение, если вы хотите увеличить размер массива динамически при нажатии на кнопку (Это, как я получил на этот вопрос).
Выделение необходимых переменных:
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>
Простейший способ, который я пробовал
Вы также можете создать массив в файл компонента, и вы можете называть его с *директива 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>
Мое решение:
export class DashboardManagementComponent implements OnInit {
_cols = 5;
_rows = 10;
constructor() { }
ngOnInit() {
}
get cols() {
return Array(this._cols).fill(null).map((el, index) => index);
}
get rows() {
return Array(this._rows).fill(null).map((el, index) => index);
}
В HTML:
<div class="charts-setup">
<div class="col" *ngFor="let col of cols; let colIdx = index">
<div class="row" *ngFor="let row of rows; let rowIdx = index">
Col: {{colIdx}}, row: {{rowIdx}}
</div>
</div>
</div>
Этого можно добиться так:
HTML-код:
<div *ngFor="let item of fakeArray(10)">
...
</div>
Машинопись:
fakeArray(length: number): Array<any> {
if (length >= 0) {
return new Array(length);
}
}