Wiederholen Sie HTML-Element mehrmals mit ngFor basierend auf einer Nummer

Question

Wie verwende ich *ngFor, um ein HTML-Element mehrmals zu wiederholen?

Für zB: Wenn ich eine Membervariable 20 zugewiesen habe. Wie verwende ich die * ngFor-Anweisung, um eine div-Wiederholung 20 mal zu machen?

Answer 1

könnten Sie Folgendes verwenden:

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

Oder ein eigenes Rohr implementieren:

@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

Sie können dies einfach tun, in Ihrem HTML:

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

und die Variable verwenden "Nummer" zum Indexieren.

Answer 3

einfacherer Ansatz:

eine helperArray definieren und instanziiert dynamisch (oder statisch, wenn Sie wollen) mit der Länge der Zählung, die Sie Ihre HTML-Elemente erstellen möchten. Ich möchte zum Beispiel einige Daten vom Server abrufen und Elemente mit der Länge des zurückgegebenen Arrays erstellen.

export class AppComponent { 
    helperArray: Array<any>; 

    constructor(private ss: StatusService) { 
    } 

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

Dann verwenden Sie die helperArray in meiner HTML-Vorlage.

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

Answer 4

Es gibt zwei Probleme mit den empfohlenen Lösungen mit Arrays:

1. Es ist verschwenderisch. Insbesondere für große Zahlen.
2. Sie müssen sie irgendwo definieren, was viel Unordnung für solch eine einfache und allgemeine Operation ergibt.

Es scheint effizienter, ein Pipe (einmal) zu definieren, Return ein 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; 
    } 
} 

Anwendungsbeispiel (ein Gitter mit dynamischer Breite Rendering/Höhe):

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

A einfacher und eine wiederverwendbare Lösung vielleicht, um kundenspezifische strukturelle Richtlinie wie diese zu verwenden.

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

} 

Und es wie folgt verwenden:

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

Answer 6

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

ersetzen 20 mit variablen