我如何在 angular material select 表单组件中添加搜索功能？

Question

我有 mat-select 个来自 angular material 的下拉列表。
它有来自 API 的状态列表。下拉菜单有10多个选项。

待办事项：

我想要搜索选项在 mat-select 中。我使用了 stackblitz 中的 mat-select search，但它真的很难理解。

请给我一些简单的方法。

我的json代码

"{
  "data": [
    {
      "id": 32,
      "name": "Andaman And Nicobar Islands"
    },
    {
      "id": 16,
      "name": "Odisha"
    },
    {
      "id": 34,
      "name": "Puducherry"
    },
    {
      "id": 19,
      "name": "Uttar Pradesh"
    },
    {
      "id": 5,
      "name": "Uttarakhand"
    },
    {
      "id": 6,
      "name": "Andhra Pradesh"
    }
  ],
  "statusCode": 200
}"

Answer 1

<mat-select-search [formControl]="formControlName"></mat-select-search>

在 mat-select 中添加此标签，然后按照 StackBlitz

app.component.ts 中的步骤操作

我如何在 angular material select 表单组件中添加搜索功能？

How i can add Search Functionality in angular material select form component?

html

typescript

angular

angular-material-6