使用 Angular 11/10 的多选下拉菜单

在本节中，我们将学习多选下拉菜单。我们将使用 Angular 10 或 Angular 11 来实现。如果您不了解多选下拉菜单选项，本示例将提供良好的知识。

在我们的 Angular 应用程序中，我们将使用 ng-select 的 npm 包来实现多选下拉菜单。该包用于提供 set 方法，该方法提供下拉菜单的选项。为了获得所选选项的值，该包还提供 change 事件。为了在 Angular 中获得多选下拉菜单，我们必须遵循以下步骤：

步骤 1

在此步骤中，我们将创建新应用。以下命令将用于创建新的 Angular 应用程序，如下所示：

步骤 2

在此步骤中，我们将安装 NPM 包。在这里，我们将首先安装 @ng-select 或 ng-select npm 包，然后我们将使用它来创建图表。在我们的 Angular 应用程序中，我们将使用多个选择下拉菜单来创建图表。安装 ng-select 的命令如下：

步骤 3

在此步骤中，我们将导入 NgSelectModule。在我们的应用程序中，我们将使用 ng-select 来导入它。之后，我们将其放在声明部分。我们将使用名为 app.module.ts 的文件并像这样更新它

src/app/app.module.ts

步骤 4

在此步骤中，我们将导入 CSS 文件。在这里，我们将使用名为 ng-select theme CSS 的文件并导入它。使用此文件，我们将获得多个选择下拉框的设计。我们将使用一个名为 styles.css 的文件，然后像这样导入它

src/styles.css

步骤 5

在此步骤中，我们将更新 ts 文件。在这里，我们将使用一个名为 app.component.ts 的文件并更新该文件。此文件用于包含“categories”数组，该数组将包含类别列表。在我们的应用程序中，我们将创建一个下拉框的选项。如果我们的应用程序需要创建带有默认选定选项的“select”数组，我们也可以这样做。最后，我们将创建 getSelectedValue()，它用于获取所选值并在 click 事件上调用，如下所述

src/app/app.component.ts

步骤 6

在此步骤中，我们将更新布局文件。在这里，我们将使用 HTML 并像这样更新该文件

src/app/app.component.html

现在我们上面的代码已经准备好运行了。为了运行上面的代码，我们将使用以下命令

当我们运行此命令时，将生成以下输出