如何使用 Angular 11/10 制作多选下拉菜单？

在本文中，我们将学习在 Angular 中构建多选下拉菜单。为了完成这项任务，我们需要 Angular 10 或 Angular 11 版本。有时我们需要在下拉菜单中显示动态获取的多选数据，为此，我们将使用 npm @ng-select/ng-select 包作为多选下拉菜单。该包用于提供一个 set 方法，该方法为下拉菜单提供一个选项，还提供更改事件以获取所选选项的值。要使用 Angular 构建多选下拉菜单，我们将按顺序执行以下步骤。

句法：

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

环境设置：

安装角
```
npm install -g @angular/cli
```
创建一个新的 Angular 项目
```
ng new 
```
通过运行项目检查安装。您应该在 http://localhost:4200/ 上看到 angular 登录页面
```
ng serve -o
```

项目结构：完成上述步骤后，我们的项目结构将如下图所示：

创建下拉多选：

创建一个新的应用程序。我们将使用以下命令创建一个新应用程序。
```
ng new geeksforgeeks-multiSelect
```
安装 @ngselect npm 包。为了使用下拉菜单，我们将按照以下命令从 npm 安装 @ngselect 包。
```
npm install --save @ng-select/ng-select
```

示例：在app.module.ts文件中导入NgSelectModule和FormsModule 。在这里，为了在应用程序中使用ngSelect 。我们需要在app.module.ts文件中导入NgSelectModule和FormsModule 。

app.module.ts

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { NgSelectModule } from "@ng-select/ng-select";
  
import { AppComponent } from "./app.component";
  
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, NgSelectModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "geeksforgeeks-multiSelect";
  
  cars = [
    { id: 1, name: "BMW Hyundai" },
    { id: 2, name: "Kia Tata" },
    { id: 3, name: "Volkswagen Ford" },
    { id: 4, name: "Renault Audi" },
    { id: 5, name: "Mercedes Benz Skoda" },
  ];
  
  selected = [{ id: 3, name: "Volkswagen Ford" }];
}

app.component.html

Multi-Select Dropdown using Angular 11/10

导入 CSS 文件：我们需要导入一个 NgSelectModule 的 CSS。我们将使用 ng-select/themes 文件夹中的 default.theme.css。这将为我们提供多选下拉设计。我们将在 style.css 中使用这个导入 CSS 文件。

样式.css

@import "~@ng-select/ng-select/themes/default.theme.css";

在 app.component.ts 文件中声明一个包含汽车列表的对象。在这里，我们将更新app.component.ts文件。该文件用于存储包含汽车列表的“汽车”数组。我们将所有汽车的详细信息存储在 javascript 对象和该对象内部。我们为所有不同的汽车提供 ID 和名称。我们还采用了选定的数组，我们在其中选择了我们要默认选择的那些菜单项。

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "geeksforgeeks-multiSelect";
  
  cars = [
    { id: 1, name: "BMW Hyundai" },
    { id: 2, name: "Kia Tata" },
    { id: 3, name: "Volkswagen Ford" },
    { id: 4, name: "Renault Audi" },
    { id: 5, name: "Mercedes Benz Skoda" },
  ];
  
  selected = [{ id: 3, name: "Volkswagen Ford" }];
}

渲染内容：在这里，我们将更新我们的布局或视图文件来渲染我们的内容。在这里，我们使用app.component.html文件来更新或查看我们的内容，如下所示：

app.component.html

Multi-Select Dropdown using Angular 11/10

运行应用程序：在这一步中，我们已准备好运行应用程序。可以看到类似的输出，如下所示。

ng serve

输出：