使用基于数字的ngFor多次重复HTML元素
我如何使用*ngFor重复一个HTML元素？
例如：如果我有一个成员variables分配为20.如何使用* ngFor指令使div重复20次？
您可以使用以下内容：
@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道：
@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; }
你可以简单地在你的HTML中做到这一点：
*ngFor="let number of [0,1,2,3,4,5...,18,19]"
并使用variables“数字”进行索引。
推荐使用Arrays解决scheme有两个问题：
- 这是浪费。 特别是对于大数量。
- 你必须把它们定义在某个地方，这会导致这么简单和普通的操作混乱。
定义一个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; } }
用法示例（渲染具有dynamic宽度/高度的网格）：
<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>
更简单的方法：
定义一个helperArray并dynamic地实例化它（或者，如果你愿意的话），用你想要创buildHTML元素的计数的长度。 例如，我想从服务器获取一些数据，并使用返回的数组长度创build元素。
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>
