html - 我如何在 Angular Material 选择表单组件中添加搜索功能？

Question

我有来自 Angular Material 的 mat-select 下拉列表。
它有来自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 中的步骤进行操作