我正在使用ReactiveForms编写 angular7 单页 Web 应用程序。我需要在可搜索的下拉列表中列出客户集合,为此我正在尝试使用ngx-select-dropdown
(https://www.npmjs.com/package/ngx-select-dropdown)
我的客户类如下所示
export class Customer{
public id:number;
public name:string;
constructor(cusId:number, cusName:string){
this.id = cusId;
this.name = cusName;
}
}
我的组件类看起来像这样
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
public myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.myForm = this.formBuilder.group({
selectedCustomer: [],
customers: this.formBuilder.array([
new Customer(0, "Andrew"),
new Customer(1, "Steve"),
new Customer(2, "Frank"),
new Customer(3, "Jimmie")
])
})
}
}
我的 HTML 模板看起来像这样
<div [formGroup]="myForm">
<ngx-select-dropdown formControlName="customers"></ngx-select-dropdown>
</div>
我想要的是带有以下选项的客户下拉列表。
- 下拉菜单应该是可搜索的。
- 下拉菜单应该是单选。
- 选择项目时,应更新“selectedCustomer”表单控件。(请参阅此演示中的“单选下拉”示例:https ://manishjanky.github.io/ngx-select-dropdown/ )