Использую ng-select, по
примеру из доки (
Демо, нижний пример), сделал поиск через бэкенд:
private loadCountry() {
this.countryList$ = concat(
of([]), // default items
this.countryInput$.pipe(
debounceTime(this.debounceTime),
distinctUntilChanged(),
tap(() => this.countryLoading = true),
switchMap(search => {
return this.locationService.getCountry(search).pipe(
catchError(() => of([])), // empty list on error
tap(() => this.countryLoading = false)
).toPromise().then(data => {
const countries = [];
const cnt = data.body.length;
for (let i = 0; i < cnt; i++) {
countries.push(new Country(data.body[i]));
}
return countries;
});
}),
)
);
}
Но есть проблема: после того, как пользователь в селекте выберет нужный пункт, то этот метод сработает еще раз, но с search = null. Вот как этого избежать? Как правильно прервать выполнение этого метода при search = null?
Сделал так, но мне кажется, что это технически не верно, и есть более верные решения.
private loadCountry() {
this.countryList$ = concat(
of([]), // default items
this.countryInput$.pipe(
debounceTime(this.debounceTime),
distinctUntilChanged(),
tap(() => this.countryLoading = true),
switchMap(search => {
if (!search) {this.countryLoading = false; return []; } // Мое решение
return this.locationService.getCountry(search).pipe(
catchError(() => of([])), // empty list on error
tap(() => this.countryLoading = false)
).toPromise().then(data => {
const countries = [];
const cnt = data.body.length;
for (let i = 0; i < cnt; i++) {
countries.push(new Country(data.body[i]));
}
return countries;
});
}),
)
);
}
Средний