如何使用ngfor从数组中在Angular中创建一个下拉列表？

在本文中，我们将看到如何使用AngularJS在下拉菜单中显示数组元素。有时我们需要显示动态获取的数据，而这正是ngFor功能进入现场的地方。我们可以遍历数组，应用条件并轻松显示数据。

使用ngFor： NgFor是内置的模板指令，可轻松遍历数组或对象等对象并为每个项目创建模板。

句法：

{{iter}}
{{key}}

先决条件：必须预先安装NPM。

环境设置：

• 安装角度：

npm install -g @angular/cli

• 创建一个新的Angular项目：

ng new 
cd  

• 通过运行项目检查安装。您应该在http：// localhost：4200 /上看到有角度的着陆页

ng serve -o

正在创建下拉菜单：

1.创建一个新组件：

ng g c dropdown

2.它将创建一个包含4个新文件的新目录。打开dropdown.component.ts并粘贴以下代码：

dropdown.component.ts：

Javascript

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
  players = [
    "Sachin Tendulkar",
    "Ricky Ponting",
    "Virat Kohli",
    "Kumar Sangakkara",
    "Jacques Kallis",
    "Hashim Amla    ",
    "Mahela Jayawardene    ",
    "Brian Lara",
    "Rahul Dravid",
    "AB de Villiers"
  ]
  selected = "----"
  
  update(e){
    this.selected = e.target.value
  }
}

在上面的代码中，我们定义了players数组，其中包含将在下拉菜单中显示的数据。此外，我们还有一个选定的变量，将用于显示选定的元素。方法update()接收一个事件并将其设置为其值。

3.现在，将以下代码添加到dropdown.component.html中：

dropdown.component.html：

的HTML

Choose Your Favorite Cricket Player

    ----
    
        {{player}}
    

  
You selected {{selected}}

我们创建了一个下拉菜单，将使用players数组。使用ngFor填充选项。所选变量用于显示所选选项。

4.最后将此组件添加到app.component.html中：

app.component.html：

5.现在运行该项目并打开http：// localhost：4200 /以查看结果：

ng serve -o

输出