Я пытаюсь получить отфильтрованный список опций из базы данных MySql. Я получаю ответ json, разобранный в массив объектов, но .switchMap ожидает наблюдаемую коллекцию.
Я пытался преобразовать ответ (массив объектов) в наблюдаемый с помощью
import { Observable } from 'rxjs';
import { of } from 'rxjs';
Html
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let user of (filteredUsers | async)?.results" [value]="user">
<span>{{ user.name }}</span>
<small> | ID: {{user.id}}</small>
</mat-option>
</mat-autocomplete>
Машинопись:
filteredUsers: Observable<IUserResponse>;
...
ngOnInit() {
this.getNewOrderData();
this.usersForm = this.fb.group({
userInput: null
})
this.filteredUsers = this.usersForm.get('userInput').valueChanges
.pipe(
debounceTime(700),
switchMap(value => this.search({name: value}))
);
}
search(searchTerm) : Observable<IUserResponse>{
console.log(searchTerm);
let data = {"searchTerm": searchTerm.name };
let dataJson = JSON.stringify(data);
this.dataServiceTopCarpet.fetchData("clientSearch", dataJson)
.subscribe(
(response) => {
this.spinner.stop();
//console.log(response.text());
var data = JSON.parse(response.text());
console.log(data);
if(data.Status == "Success"){
this.clienti = data.Data;
//this.filteredUsers = of(data.Data);
//console.log(this.filteredUsers);
/*
data.Data.forEach(element => {
console.log(element);
});
*/
}
else{
alert("Error1");
console.log(data);
this.authService.loggedIn = false;
this.router.navigate(['/sign-in']);
}
},
(error) => {
alert(error);
}
);
return new Observable<IUserResponse>();
}
Итак, FilterUsers является источником автозаполнения, и у меня есть массив объектов.
Я пытался удалить асинхронную опцию из:
<mat-option *ngFor="let user of (filteredUsers | async)?.results" [value]="user">
Или преобразование массива объекта в наблюдаемую коллекцию.
Попробовал другой пример использования debounceTime и switchMap.
Спасибо за любую помощь.