本文介绍了根据数字使用ngFor重复HTML元素多次的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用*ngFor
多次重复HTML元素?
How do I use *ngFor
to repeat a HTML element multiple times?
例如:如果我有一个分配给20的成员变量,如何使用* ngFor指令使div重复20次?
For eg:If I have a member variable assigned to 20. How do I use the *ngFor directive to make a div repeat 20 times?
推荐答案
您可以使用以下内容:
@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;
}
这篇关于根据数字使用ngFor重复HTML元素多次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!