Зацикливание числа в ngFor: несколько методов в Angular

Чтобы зациклить число с помощью ngForв Angular, вы можете использовать следующие методы:

Метод 1: использование массива чисел

  1. Создайте массив чисел в файле компонента.
  2. Используйте директиву ngForв своем HTML-шаблоне для циклического обхода массива.
  3. Доступ к текущему номеру в цикле.

Вот пример:

В файле компонента:

numbers: number[] = [1, 2, 3, 4, 5];

В вашем HTML-шаблоне:

<div *ngFor="let number of numbers">
  {{ number }}
</div>

Метод 2: использование диапазона чисел

  1. Сгенерируйте диапазон чисел с помощью конструктора Arrayи метода fill.
  2. Используйте директиву ngForдля перебора сгенерированного диапазона.

Вот пример:

В вашем HTML-шаблоне:

<div *ngFor="let number of [].constructor(5).fill(0).map((_, index) => index + 1)">
  {{ number }}
</div>

Метод 3: использование пользовательской трубы

  1. Создайте собственный канал, генерирующий диапазон чисел.
  2. Используйте собственный канал с директивой 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>