如何解决Angular mat-autocomplete 显示错误的过滤选项
当我在 input 中输入内容时,我必须找到包含该子字符串的所有选项。问题是过滤后的值显示不正确。
- 当我输入“n”时,自动完成不显示任何内容(但应显示所有选项)。
- 当我输入“ne”时,它显示n,new,need,sNow(但应该显示new,need)。
- 当我输入“new”时,它显示new,need(但应该只显示new)。 就像搜索服务采用先前输入的值一样。
我的模板:
<form [formGroup]="myForm">
<input [formControl]="myForm.get('myInput')" type="text" [matAutocomplete]="myAutocomplete"/>
<mat-autocomplete #myAutocomplete="matAutocomplete">
<mat-option *ngFor="let item of autocompleteItems" [value]="item">
{{item}}
</mat-option>
</mat-autocomplete>
</form>
在我的组件中:
public myForm = new FormGroup({myInput: new FormControl('',[Validators.required])});
public autocompleteItems: string[] = [];
ngOnInit() {
this.myForm.get('myInput').valueChanges
.pipe(
takeuntil(this.unsubscribe),switchMap((inputString: string) => this.mySearchService.search(inputString)))
.subscribe((foundStrings: string[]) => {
this.autocompleteItems = foundStrings;
console.log(this.autocompleteItems);
});
}
P。 S. 日志显示正确的字符串数组:
- 输入 n - n、new、need、sNow。
- 输入ne - 新的,需要。
- 输入 new - new。
请告诉我我做错了什么。
解决方法
管道 pairwise 到您的 valueChanges Observable 以获取订阅中的 previous
/next
值,然后使用 next
作为 currentValue
public myForm = new FormGroup({
myInput: new FormControl('',[Validators.required])
});
public autocompleteItems: string[] = [];
ngOnInit() {
this.myForm.get('myInput').valueChanges
.pipe(pairwise())
.pipe(
takeUntil(this.unsubscribe),switchMap((inputString: string) => this.mySearchService.search(inputString)))
.subscribe(([prev,next]: [any,any]) => {
this.autocompleteItems = next;
console.log(this.autocompleteItems);
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。