Angular 如何转换为可编辑的选择框?
我有一个带引导的angular 5项目。在我的一个html组件中,我有一个选择框。当我点击它时,会显示一个下拉列表,我可以选择一个。但是,我希望用户键入一些字符串,以便缩小下拉项的范围。下面是我当前的代码片段,我知道如何将选择框转换为可编辑框Angular 如何转换为可编辑的选择框?,angular,bootstrap-4,angular-ui,ui-select2,Angular,Bootstrap 4,Angular Ui,Ui Select2,我有一个带引导的angular 5项目。在我的一个html组件中,我有一个选择框。当我点击它时,会显示一个下拉列表,我可以选择一个。但是,我希望用户键入一些字符串,以便缩小下拉项的范围。下面是我当前的代码片段,我知道如何将选择框转换为可编辑框 <select formControlName="contactList" [compareWith]="compareResource"> <option value="" disabled>{{ 'PLACEH
<select formControlName="contactList" [compareWith]="compareResource">
<option value="" disabled>{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}</option>
<option *ngFor="let contactList of contactLists" [ngValue]="contactList">{{ contactList.name }}</option>
</select>
{{'占位符。联系{列表{翻译}
{{contactList.name}
我想将现有的选择框代码转换为可编辑的选择框。请分享你的想法。我对UI编程非常陌生。谢谢您可以使用角材质自动完成过滤器来获得您想要的结果。- 这可以通过使用 安装ng选择
npm install --save @ng-select/ng-select
应用程序模块.ts
将其导入模块
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgSelectModule } from '@ng-select/ng-select';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
CommonModule,
NgSelectModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
style.css
导入ng选择默认样式
@import "~@ng-select/ng-select/themes/default.theme.css";
app.component.html
通过绑定名称列表创建ng select下拉列表作为下拉和搜索功能的项数组
<div style="text-align:center">
Editable Dropdown
</div>
<div style="width:300px; height:200px">
<ng-select class="autocomplete" dropdownPosition="bottom" [searchFn]="searchName" [items]="nameList"
[(ngModel)]="selectedName" [dropdownPosition]="'auto'">
<ng-template ng-header-tmp>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Username</div>
</div>
</div>
</ng-template>
<ng-template ng-label-tmp let-item="item">
<span>{{item}}</span>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">{{item}}</div>
</div>
</div>
</ng-template>
</ng-select>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
selectedName: string;
nameList: string[];
constructor() { }
ngOnInit() {
this.nameList = this.getNameList();
}
getNameList(): string[] {
return [
'Adam',
'Alex',
'Bob',
'Bennt',
'Cathrina',
'Dug',
'Suzzy',
'Amy',
'Milan'
];
}
searchName(filter: string, item: string) {
filter = filter.toLocaleLowerCase();
return (item.toLocaleLowerCase().indexOf(filter) > -1);
}
}