使用基於數字的ngFor多次重複HTML元素

Question

如何使用*ngFor多次重複HTML元素？

例如： 如果我有一個成員變量分配爲20.我如何使用* ngFor指令使div重複20次？

Answer 1

您可以使用下列內容：

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

或實現自定義管道：

@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

您可以在HTML簡單的做到這一點：

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

，並使用變量「數字」來索引。

Answer 3

更簡單的方法：

定義helperArray和動態實例化它（或者，如果你想靜態）與您要創建的HTML元素的計數的長度。例如，我想從服務器獲取一些數據，並使用返回的數組長度創建元素。

export class AppComponent { 
    helperArray: Array<any>; 

    constructor(private ss: StatusService) { 
    } 

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

然後在我的HTML模板中使用helperArray。

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

Answer 4

有兩個問題與使用Arrays建議的解決方法：

1. 這是一種浪費。特別是對於大數量。
2. 你必須將它們定義在某個地方，這會導致很多雜亂的操作。

似乎更有效，以限定Pipe（一次），並返回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; 
    } 
} 

使用實例（呈現與動態寬度的網格/高度）：

<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

甲更簡單並且可重用的解決方案可以使用像這樣的自定義結構指令。

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

} 

而且使用這樣的：

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

Answer 6

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

與可變