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

在这篇文章中，我们将学习如何在Angular中建立多选下拉菜单。为了完成这项任务，我们需要Angular 10或Angular 11版本。有时我们需要在下拉菜单中显示动态获取的多选数据，为此，我们将使用npm @ng-select/ng-select包作为多选下拉菜单。该包用于提供一个设置方法，为下拉菜单提供一个选项，同时也提供变化事件来获取所选选项的值。为了使用Angular建立一个多选下拉菜单，我们将依次按照以下步骤进行。

语法:

<ng-select
 [items]="item-name"
 bindLabel="name"
 placeholder="Select item"
 appendTo="body"
 [multiple]="true"
 [(ngModel)]="selected">
</ng-select>

环境搭建:

安装 Angular

npm install -g @angular/cli

创建一个新的Angular项目

ng new <project-name>

通过运行该项目来检查安装情况。你应该在http://localhost:4200/ 上看到angular的登陆页面。

ng serve -o

项目结构：完成上述步骤后，我们的项目结构将看起来像下面的图片。

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

创建下拉式多选：

创建一个新的应用程序。我们将使用下面的命令来创建一个新的应用程序。

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。

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

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

styles.css

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

在app.component.ts文件中声明一个将包含汽车列表的对象。这里，我们将更新app.component.ts文件。这个文件是用来存储包含汽车列表的 “cars “数组。我们在javascript对象中存储所有汽车的细节，在这些对象中。我们正在为所有不同的汽车提供ID和名字。我们也在选择数组，在其中选择那些我们想默认选择的菜单项。

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文件来更新或查看我们的内容，像这样。

<h1>Multi-Select Dropdown using Angular 11/10</h1>
  
<!-- Using Items Input -->
<ng-select
  [items]="cars"
  bindLabel="name"
  placeholder="Select Category"
  appendTo="body"
  [multiple]="true"
  [(ngModel)]="selected">
</ng-select>

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