Было опубликовано много хороших ответов, но я хотел бы добавить еще один.
Не все числа могут быть представлены с помощью float / double. Например, будет представлено число «0,2» как «0.200000003» в одинарной точности в стандарте по плавающей точке IEEE754.
Модель для хранения действительных чисел под капотом представляет собой число с плавающей запятой в качестве
Хотя вы можете легко ввести 0.2
, FLT_RADIX
и DBL_RADIX
равно 2; не 10 для компьютера с FPU, который использует «Стандарт IEEE для двоичной арифметики с плавающей запятой (ISO / IEEE Std 754-1985)».
. Точно так же трудно точно представлять такие числа. Даже если вы укажете эту переменную явно без какого-либо промежуточного вычисления.
Внутри вашего компонента вы можете определить массив чисел (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..20 в 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 {
(...)
}
Вы можете использовать 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);
}
Я не тестировал код, но он должен работать.
Простейший способ, которым я попытался
Вы также можете создать массив в своем файле компонента, и вы можете вызвать его с помощью директивы * 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>
Пожалуйста, найдите прилагаемое мое динамическое решение, если вы хотите увеличить размер массива динамически после нажатия на кнопку (вот как я дошел до этого вопроса).
Распределение необходимых переменных:
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 для использования чисел вместо коллекций. В настоящий момент * 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>
<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>
<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);
}
}
Я не мог нести идею выделения массива для простого повторения компонентов, поэтому я написал структурную директиву. В простейшей форме это не делает индекс доступным для шаблона, он выглядит так:
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);
}
}
}
Я решил это так, используя 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);
}
Ошибка проверки и утверждения для краткости опущены (например, что происходит, если шаг отрицательный).