如何使用* ngFor多次重复HTML元素?
例如:
如果我有一个成员变量分配给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({
- 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;
- }