Angular10 NgFor 指令

在本文中，我们将了解 Angular 10 中的NgFor是什么以及如何使用它。

NgFor用作结构指令，为给定集合呈现每个元素，每个元素都可以显示在页面上。

句法：

NgModule：NgForOf使用的模块是：

• 通用模块

选择器：

• [ngFor]

方法：

• 创建要使用的 Angular 应用程序
• 使用 NgFor 不需要任何导入
• 在 app.component.ts 中定义要与 ngFor 指令一起使用的数组。
• 在 app.component.html 中使用带有列表元素的 NgFor 指令来显示数组元素。
• 使用 ng serve 为 Angular 应用程序服务以查看输出

示例 1：

app.component.html

  
 {{i}} 

输出：

示例 2：

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent  {
  a=['gfg1', 'gfg2', 'gfg3', 'gfg4']
}

app.component.html

    
 {{i}} 

输出：

参考： https://angular.io/api/common/NgForOf