![](/img/trans.png)
[英]Mat-autocomplete is not working in ngOnInit(), Map() is not working
[英]Angular 9 mat-autocomplete not working properly with switchmap operator
我正在使用 deouncetime 和 switchmap 运算符在我的 API 中搜索以执行自动完成。 但是订阅它后,它会返回 API 中的所有记录。
我知道 switchmap 取消了以前的 observables。 所以我不明白为什么在订阅它后会返回 API 的所有记录。
我确保 API 的搜索请求运行良好。 它只返回搜索的记录。
先感谢您
.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
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
}
})
}
服务
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.