Repetir el elemento HTML varias veces usando ngFor basado en un número

Hay dos problemas con las soluciones recomendadas usando Arrays:

1. Es un desperdicio. En particular para grandes números.
2. Tienes que definirlos en algún lugar que resulta en un montón de desorden para una operación tan simple y común.

Parece más eficiente definir un Pipe (una vez), devolviendo un Iterable:

import {PipeTransform, Pipe} from '@angular/core';

@Pipe({name: 'times'})
export class TimesPipe implements PipeTransform {
  transform(value: number): any {
    const iterable = {};
    iterable[Symbol.iterator] = function* () {
      let n = 0;
      while (n < value) {
        yield ++n;
      }
    };
    return iterable;
  }
}

Ejemplo de uso (renderizando una cuadrícula con ancho / alto dinámico):

<table>
    <thead>
      <tr>
        <th *ngFor="let x of colCount|times">{{ x }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let y of rowCount|times">
        <th scope="row">{{ y }}</th>
        <td *ngFor="let x of colCount|times">
            <input type="checkbox" checked>
        </td>
      </tr>
    </tbody>
</table>

<div *ngFor="let dummy of ' '.repeat(20).split(''), let x = index">

Reemplace 20 con su variable

Puede hacer esto en su HTML:

*ngFor="let number of [0,1,2,3,4,5...,18,19]"

Y utilice la variable "number" para indexar.

Una solución más simple y reutilizable tal vez usar una directiva estructural personalizada como esta.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appTimes]'
})
export class AppTimesDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

  @Input() set appTimes(times: number) {
    for (let i = 0 ; i < times ; i++) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }

}

Y úsalo así:

<span *appTimes="3" class="fa fa-star"></span>

Un enfoque más sencillo:

Defina un helperArray e instancielo dinámicamente (o estático si lo desea) con la longitud del recuento que desea crear sus elementos HTML. Por ejemplo, quiero obtener algunos datos del servidor y crear elementos con la longitud de la matriz que se devuelve.

export class AppComponent {
  helperArray: Array<any>;

  constructor(private ss: StatusService) {
  }

  ngOnInit(): void {
    this.ss.getStatusData().subscribe((status: Status[]) => {
      this.helperArray = new Array(status.length);
    });
  }
}

Entonces usa el helperArray en mi plantilla HTML.

<div class="content-container" *ngFor="let i of helperArray">
  <general-information></general-information>
  <textfields></textfields>
</div>

Aquí hay una versión ligeramente mejorada de la directiva estructural de Ilyass Lamrani que le permite usar el índice en su plantilla:

@Directive({
  selector: '[appRepeatOf]'
})
export class RepeatDirective {

  constructor(private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef) {
  }

  @Input()
  set appRepeatOf(times: number) {
    const initialLength = this.viewContainer.length;
    const diff = times - initialLength;

    if (diff > 0) {
      for (let i = initialLength; i < initialLength + diff; i++) {
        this.viewContainer.createEmbeddedView(this.templateRef, {
          $implicit: i
        });
      }
    } else {
      for (let i = initialLength - 1; i >= initialLength + diff ; i--) {
      this.viewContainer.remove(i);
    }
  }

}

Uso:

<li *appRepeat="let i of myNumberProperty">
    Index: {{i}}
</li>

Si está utilizando Lodash , puede hacer lo siguiente:

Import Lodash en el componente.

import * as _ from "lodash";

Declare una variable miembro dentro del componente para hacer referencia a Lodash.

lodash = _;

Luego, en su vista, puede usar la función de rango . 20 puede ser reemplazado por cualquier variable en su componente.

*ngFor="let number of lodash.range(20)"

Debe decirse que el enlace a funciones en la vista puede ser costoso, dependiendo de la complejidad de la función que está llamando como La detección de cambios llamará a la función repetidamente.