ngOnInit(): void {
this.filteredAccountOptions = this.accountControl.valueChanges
.pipe(
startWith(''),
map(value => this.accountFilter(value))
);
.
.
.
The issue arises when the "return this.createDialogService.accountOptions" statement is executed before the subscription part is completed in the "accountSearch(value)" method. This causes the previous data to be displayed.
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) => {}
)
}
Here's my HTML code:
<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>