Question

我想实现可搜索的select（select2），最初该下拉列表应显示一个名为“ select”的文本，并且在下拉列表更改时该值应可用于app.component.ts。我有一些用angular 1编写的代码，但是我想在angular 7中构建此功能，因为我对angular7完全陌生，我无法实现。

<select select2 ng-model="selected" ng-options="person.id as person.name for person in list | orderBy:'name'" ng-disabled="disabled" style="width: 200px;"></select>

HomeComponent.component.ts

export class HomeComponent implements OnInit {

    list = [{
        name: "bala",
        rnNo: 21
      },
      {
        name: "suresh",
        rnNo: 23
      },
      {
        name: "ramesh",
        rnNo: 24
      }];
      selected: any = 23;

      ngOnInit() {
      }

      valueChange(event) {
        console.log("selected value", event.target.value, 'value of selected', this.selected);
      }
    }

预期结果

应该选择第一个Dropdwon选项
应该像select2（单选）一样可搜索select
下拉菜单中的值更改应可用于app.component.ts

实际结果

空
应该像select2（单选）一样可搜索select
未实现

我已经引用了以下链接

Check with plnkr

Answer 1

首先，祝贺您从AngularJS升级到Angular7。

关于与Jquery的select2类似的功能，实际上有许多与Angular 7兼容的替代方法。但是，我个人认为最可靠和广泛的替代方法是ng-select。它也支持Angular 7。

要使用它，可以通过npm安装它：

npm i @ng-select/ng-select

您可以通过here阅读其余的安装说明。

还有一个stackblitz demo，请随时尝试和玩耍。

您可以在here上查看更多示例/示例代码。

如何将1号角代码转换为7号角

1 个答案: