Mat-autocomplete is showing the previous date received from the server but not the latest. How can I fix it to show the latest data received?

Question

ngOnInit(): void {
    this.filteredAccountOptions = this.accountControl.valueChanges
    .pipe(
      startWith(''),
      map(value => this.accountFilter(value))
    );
    .
    .
    .

Actually the "return this.createDialogService.accountOptions" statement is executed before the subscription part is fulfilled in its previous line in the "accountSearch(value)" method. That's why the previous data is shown.

private accountFilter(value: string): string[] {
    this.accountSearch(value);
    return this.createDialogService.accountOptions
  }

accountSearch(searchedValue: string) {
    this.createDialogService.searchAccount(searchedValue).subscribe(
      (success) => {
        this.createDialogService.accountOptions = JSON.parse(success.message)
      },
      (error) => {}
    )
  }

My HTML

<input type="text" matInput [formControl]="accountControl" [matAutocomplete]="auto1">
    <mat-autocomplete #auto1="matAutocomplete">
        <mat-option *ngFor="let option of filteredAccountOptions | async" [value]="option.Name">
             {{option.Name}}
        </mat-option>
    </mat-autocomplete>

Answer 1

Because you change the data after you return the Observable, uses swithMap operator. To avoid overloading the server, use debounceTime.

  ngOnInit(): void {
    this.filteredAccountOptions = this.accountControl.valueChanges.pipe(
      startWith(''),
      debounceTime(3000),
      switchMap(value => this._accountFilter(value)),
    );
  }

  private _accountSearch(searchedValue: string): Observable<any> {
    return this.createDialogService.searchAccount(searchedValue).pipe(
      map(success =>  JSON.parse(success.message)),
    );
  }