angular - 对象数组上的角度输入搜索字段
问题描述
嘿,我是 Angular 新手,我有一个问题,我有一个对象数组:
holders: Holder[] = [
{ name: 'hanna', nationalId: 310, customerNumber: '123' },
{ name: 'jack', nationalId: 320, customerNumber: '124' },
{ name: 'sara', nationalId: 320, customerNumber: '125' },
];
在我的搜索字段中,我输入 customerNumber,如果持有人存在,它的名称将显示在该字段下,如果不存在,它将显示错误(持有人不存在)组件:
constructor(private holderService: HolderService) {
this.holderService.searchfunc(this.searchTerm$)
.subscribe(results => {
this.result = results;
});
}
searchHolder(term: string): void {
this.searchTerm$.next(term);
}
和服务:
searchfunc(terms: Observable<string>) {
return terms.pipe(
debounceTime(500),
distinctUntilChanged(),
map(term => this.searchEntries(term)));
}
searchEntries(term) {
if(term){
this.searchResult = this.holders.filter(x => x.customerNumber === term);
if(this.searchResult[0]){
return this.searchResult[0].name;
}else{
return 'the holder does not exist';
}
}else{
this.search = term;
}
}
有没有更好的解决方案?我想处理组件中的持有者而不是服务中的存在
解决方案
如果您愿意,您可以将整个内容放入组件中,但这样做是更好的方法。
如果你想在组件中编写整个代码,你可以这样做。
constructor(){
this.searchTerm$.pipe(
debounceTime(500),
distinctUntilChanged(),
map(term => this.searchEntries(term))
.subscribe(results => {
this.result = results;
});
)
}
searchEntries(term){
if(term){
this.searchResult = this.holders.filter(x => x.customerNumber === term);
if(this.searchResult[0]){
return this.searchResult[0].name;
}else{
return 'the holder does not exist';
}
}else{
this.search = term;
}
}
推荐阅读
- java - Spring Boot JPA,存储库不删除记录
- eclipse - Intellij Idea 创建 eclipse 文件和文件夹
- r - 如何下载用于在 R Shiny 中生成所选行的源数据
- sharepoint - 如何使用 Microsoft Graph API 查找所有网站
- c# - 如何在 PuppeteerSharp 中设置下载行为?
- jquery - 将类添加到第二个列表项
- algorithm - 实现 PriorityQueue 算法
- angular - 即使名称相同,两个单选按钮也会被选中(iOS 12.2)
- html - 如何使用 Angular 7 中的内部 html 将点击事件从 ts 动态绑定到 html 以锚定标签?
- excel - 如何更新此 Excel 查询以查找匹配的数据并获取其他值