Чтобы зациклить число с помощью ngForв Angular, вы можете использовать следующие методы:
Метод 1: использование массива чисел
- Создайте массив чисел в файле компонента.
- Используйте директиву
ngForв своем HTML-шаблоне для циклического обхода массива. - Доступ к текущему номеру в цикле.
Вот пример:
В файле компонента:
numbers: number[] = [1, 2, 3, 4, 5];
В вашем HTML-шаблоне:
<div *ngFor="let number of numbers">
{{ number }}
</div>
Метод 2: использование диапазона чисел
- Сгенерируйте диапазон чисел с помощью конструктора
Arrayи методаfill. - Используйте директиву
ngForдля перебора сгенерированного диапазона.
Вот пример:
В вашем HTML-шаблоне:
<div *ngFor="let number of [].constructor(5).fill(0).map((_, index) => index + 1)">
{{ number }}
</div>
Метод 3: использование пользовательской трубы
- Создайте собственный канал, генерирующий диапазон чисел.
- Используйте собственный канал с директивой
ngForдля перебора сгенерированного диапазона.
Вот пример:
Создайте файл с именем range.pipe.tsсо следующим кодом:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'range' })
export class RangePipe implements PipeTransform {
transform(value: number): number[] {
return Array(value).fill(0).map((_, index) => index + 1);
}
}
В вашем HTML-шаблоне:
<div *ngFor="let number of 5 | range">
{{ number }}
</div>