在Angular 6/7/8中,您可以使用NgbTypeahead指令来实现返回匹配和不匹配记录的功能。
首先,您需要安装并导入ng-bootstrap库。您可以使用以下命令来安装它:
npm install @ng-bootstrap/ng-bootstrap
然后,在您的模块文件中导入NgbModule:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [NgbModule]
})
export class YourModule { }
接下来,您可以在模板中使用NgbTypeahead指令。以下是一个示例:
在组件中,您可以定义一个search方法来处理搜索逻辑:
search = (text$: Observable) => {
return text$
.debounceTime(200)
.distinctUntilChanged()
.switchMap(term => this.searchData(term));
}
searchData(term: string): Observable {
// 在此处进行搜索逻辑,返回一个Observable
}
在searchData方法中,您可以使用您的数据源进行搜索逻辑,并返回一个Observable以供NgbTypeahead指令使用。
最后,您可以使用ngbTypeahead的resultFormatter和inputFormatter属性来处理返回匹配和不匹配记录的逻辑。以下是一个示例:
在组件中,您可以定义formatResult和formatInput方法来处理匹配和不匹配记录的格式化:
formatResult = (result: any) => {
// 处理匹配的记录格式化逻辑
return result;
}
formatInput = (result: any) => {
// 处理不匹配的记录格式化逻辑
return result;
}
通过定义formatResult和formatInput方法,您可以根据您的需求自定义匹配和不匹配记录的格式化。
以上是一个基本的示例,您可以根据您的具体需求进行修改和扩展。希望对您有所帮助!