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

在 Angular 中， ngFor指令实现了以最少的代码行显示重复内容或内容列表的动机，这与传统编程语言中的for 循环具有相同的目的。

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

示例 1：
Demo.Component.ts

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

输出：