根据数字使用 ngFor 多次重复 HTML 元素

你可以使用以下方法:

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

或者实现一个自定义管道:

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

你可以在 HTML 中简单地做到这一点:

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

并使用变量“ number”进行索引。

更简单的方法:

定义一个 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>

使用 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<any>> {};
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>

使用这样的自定义结构指令可能是一个更简单和可重用的解决方案。

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>

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

用变量替换 20

下面是 Ilyass Lamrani 的结构指令的一个稍微改进的版本，它允许你在模板中使用索引:

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


}

用法:

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

如果你使用 Lodash，你可以做到以下几点:

将 Lodash导入到组件中。

import * as _ from "lodash";

在组件中声明一个成员变量以引用 Lodash。

lodash = _;

然后在您的视图中，您可以使用 范围函数范围函数范围函数范围函数.20来替换组件中的任何变量。

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

必须指出的是，绑定到视图中的函数的成本可能很高，这取决于变化检测所调用的函数的复杂性，因为它会反复调用该函数。

实现这一点的最有效和简洁的方法是添加迭代器实用程序。不用麻烦了。不必在 ngFor 指令中设置变量:

function times(max: number) {
return {
[Symbol.iterator]: function* () {
for (let i = 0; i < max; i++, yield) {
}
}
};
}


@Component({
template: ```
<ng-template ngFor [ngForOf]="times(6)">
repeats 6 times!
</ng-template>


```
})
export class MyComponent {
times = times;
}

<ng-container *ngFor="let _ of [].constructor(20)">🐱</ng-container>

产生

您不需要像大多数答案中建议的那样填充数组。如果在 ngFor循环中使用 index，那么只需要创建一个具有正确长度的空数组:

const elements = Array(n); // n = 20 in your case

在你看来:

<li *ngFor="let element in elements; let i = index">
<span>\{\{ i }}</span>
</li>

我知道你特别要求使用 * ngFor，但是我想分享我使用结构化指令解决这个问题的方法:

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


@Directive({ selector: '[appRepeat]' })
export class RepeatDirective {
constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) {
}


@Input() set appRepeat(loops: number) {
for (let index = 0; index < loops; ++index) {
this.viewContainerRef.createEmbeddedView(this.templateRef);
}
}
}

你可以像这样使用它:

<div *appRepeat="15">
Testing
</div>

你可以简单地使用:

超文本标示语言

<div *ngFor="let i of Count">

TS

export class Component implements OnInit {
Count = [];


constructor() {
this.Count.length = 10; //you can give any number
}


ngOnInit(): void {}
}

你可以这样做:

T:

   CreateTempArray(number){
var arr=[];
for(let i=0;i<number;i++){
arr[i]="";
}
return arr;
}

网址:

<div *ngFor="let i of CreateTempArray(20);">
cycle 20 times
</div>

做第 N 次重复的最好和简单的方法是 [].constructor(nth)

例如5次循环

 <ng-container *ngFor="let _ of [].constructor(5); let i = index">
<b>\{\{ i }}</b>
</ng-container>