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

在这篇文章中，我们将看到如何使用 AngularJS 在下拉菜单中显示数组元素。有时我们需要显示动态获取的数据，这就是 ngFor 特性出现的地方。我们可以遍历数组，应用条件并轻松显示数据。

使用 ngFor： NgFor 是一个内置的模板指令，它可以很容易地迭代数组或对象之类的东西，并为每个项目创建一个模板。

句法：

{{iter}}
{{key}}

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

环境设置：

• 安装角度：

npm install -g @angular/cli

• 创建一个新的 Angular 项目：

ng new 
cd  

• 通过运行项目检查安装。您应该会在 http://localhost:4200/ 上看到 angular 登陆页面

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

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

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

dropdown.component.html：

HTML

Choose Your Favorite Cricket Player

    ----
    
        {{player}}
    

  
You selected {{selected}}

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

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

app.component.html：

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

ng serve -o

输出