使用基于数字的 ngFor 多次重复 HTML 元素 [英] Repeat HTML element multiple times using ngFor based on a number

问题描述

如何使用 *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 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！