Angular 9 mat-autocomplete 不能與 switchmap 運算符一起正常工作

Question

我正在使用 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}`)

  }

Answer 1

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
   }
 });
}