Répétez l'élément HTML à plusieurs reprises à l'aide de ngFor basée sur un certain nombre

Question

Comment puis-je utiliser *ngFor de répéter un élément HTML en plusieurs fois?

Pour exemple: Si j'ai une variable de membre affecté à 20. Comment puis-je utiliser l' *ngFor directive de faire un div répéter 20 fois?

Answer 1

Vous pouvez utiliser les éléments suivants:

@Component({
  (...)
  template: `
    <div *ngFor="let i of Arr(num).fill(1)"></div>
  `
})
export class SomeComponent {
  Arr = Array; //Array type captured in a variable
  num:number = 20;
}

Ou de mettre en œuvre une tuyauterie sur mesure:

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

@Pipe({
  name: 'fill'
})
export class FillPipe implements PipeTransform {
  transform(value) {
    return (new Array(value)).fill(1);
  }
}

@Component({
  (...)
  template: `
    <div *ngFor="let i of num | fill"></div>
  `,
  pipes: [ FillPipe ]
})
export class SomeComponent {
  arr:Array;
  num:number = 20;
}

Answer 2

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

Remplacer 20 avec votre variable

Answer 3

Il y a deux problèmes avec les solutions recommandées à l'aide de Arrays:

1. C'est un gaspillage. En particulier pour les grands nombres.
2. Vous devez définir quelque part, ce qui entraîne beaucoup de désordre pour une si simple et l'exploitation commune.

Il semble plus efficace de définir un Pipe (une fois), de retour d'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;
  }
}

Exemple d'utilisation (le rendu d'une grille avec des dynamiques largeur / hauteur):

<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>

Answer 4

Vous pouvez simplement le faire dans votre code HTML:

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

Et d'utiliser la variable "nombre" à l'index.

Answer 5

Un moyen plus simple et réutilisable solution peut-être pour utiliser des structurel directive de ce genre.

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);
    }
  }

}

Et de l'utiliser comme ceci :

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