如何使用ngFor基于数字多次重复HTML元素？

在Angular ngFor指令中，该指令可实现以最少的代码行显示重复或内容列表的动机，其作用与常规编程语言中的循环相同。

我们可以使用javascript / typescript函数Array()根据数字打印重复的内容行，该函数将生成一个从0到n-1的数字列表。我们遍历此列表以产生n条重复的内容行。

范例1：
演示组件

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
  
export class DemoComponent implements OnInit {
  
  constructor() {
  }
  ngOnInit() {
  }
  //function to return list of numbers from 0 to n-1
  numSequence(n: number): Array {
    return Array(n);
  }
}

Demo.Component.html

  
   
Sequence of Numbers from 0 to 5
  
  
     
    {{i}} 
  

输出：

范例2：
在打字稿文件中插入模板，并重复相同的元素6次。
Demo2.component.ts

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-demo',
  //template encapsulated within the component ts file
  // instead of separate template(html)
  template: '
  
  
   
Repeated GeeksforGeeks
  
  
    

       
     

                GeeksforGeeks
    
  

',
  styleUrls: ['./demo.component.css']
})
  
export class DemoComponent implements OnInit {
  constructor() {
  }
  
  ngOnInit() {
  }
   
  //function to return list of numbers from 0 to n-1
  numSequence(n: number): Array {
    return Array(n);
  }
}

输出：