[英]Angular 9 mat-autocomplete not working properly with switchmap operator
I am using deouncetime and switchmap operator to search in my APIs to perform autocomplete.我正在使用 deouncetime 和 switchmap 运算符在我的 API 中搜索以执行自动完成。 But after subscribing to it, it returns all records from the API.但是订阅它后,它会返回 API 中的所有记录。
I know that switchmap cancels previous observables.我知道 switchmap 取消了以前的 observables。 So I can't understand why after subscribing to it returning all records from API.所以我不明白为什么在订阅它后会返回 API 的所有记录。
I made sure the search request for API working well.我确保 API 的搜索请求运行良好。 It is returning only searched records.它只返回搜索的记录。
Thank you in advance先感谢您
.html .html
<mat-form-field class="example-full-width">
<mat-label>Search for seller name</mat-label>
<input matInput #input
aria-label="product name"
[matAutocomplete]="auto"
[formControl] ="searchVendorCtrl">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='Selected($event.option.value)' >
<ng-container>
<mat-option *ngFor="let state of vendor_list " [value]="state" >
<span>{{state.name}}</span>
</mat-option>
<mat-option *ngIf="!vendor_list || !vendor_list.length" class="text-danger">
Such seller does not exists
</mat-option>
</ng-container>
</mat-autocomplete>
</mat-form-field>
.ts .ts
ngOnInit() {
this.subscribe5 = this.searchVendorCtrl.valueChanges.pipe(
debounceTime(400),
filter(term => term),
switchMap((value) => this.vendorService.search_vendors(value))
).subscribe(data =>{
if(data){
console.log(data) // resulting all data from API
this.vendor_list = data
}
})
}
service服务
search_vendors(data):Observable<any>{
return this.http.get<any>(`${this.vendor_url}/vendor_autocomplete/${data}`)
}
isLoading: boolean;
ngOnInit() {
this.subscribe5 = this.searchVendorCtrl.valueChanges.pipe(
debounceTime(400),
tap(() => this.isLoading = true),
switchMap((value) => this.vendorService.search_vendors(value)
.pipe(
finalize(() => this.isLoading = false),
))
).subscribe(data =>{
if(data){
console.log(data) // resulting all data from API
this.vendor_list = data
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.