FromEvent от rxjs не работает должным образом
Я создал компонент с функцией поиска, который вызывает API и отображает данные на странице. Как только я получаю результаты поиска, я сохраняю их в localStorage, чтобы восстановить данные, как только вы вернетесь на ту же страницу компонента поиска. Все работает нормально, пока я не назначу сохраненные данные свойству наблюдаемого результата formEvent this.searchResult$ . Проблема в том, что fromEvent больше не срабатывает, когда я возвращаюсь на ту же страницу по другим маршрутам.
ngOnInit() {
const searchEvent$ = fromEvent<any>(this.inputSearch.nativeElement, 'keyup').pipe(tap(() => { console.info('working'); }));
this.searchResult$ = searchEvent$
.pipe(
tap(() => { this.isDataOn = true }),
map(event => event.target.value),
filter(value => value ? true : false),
switchMap(search => this.notesService.onSearchNotes(search)))
)
if (!this.isDataOn) {
this.refreshData()
}
}
refreshData() {
if (localStorage.getItem("queryStack")) {
const data = JSON.parse(localStorage.getItem("queryStack") || "[]");
console.info(data);
this.searchResult$ = of(data);
}
}
Скажите, пожалуйста, как разместить восстановленные данные, чтобы они отражались в шаблоне с тем же асинхронным каналом?
Я не хочу вызывать http для предыдущих результатов поиска.
Ответы 1
Попробуйте следующий подход, который объединяет любые сохраненные данные, которые у вас есть в локальном хранилище, с результатами, полученными с сервера в ответ на события keyup.
// in your imports
import { merge } from 'rxjs';
ngOnInit() {
const searchEvent$ = fromEvent<any>(this.inputSearch.nativeElement, 'keyup').pipe(tap(() => { console.info('working'); }));
this.searchResult$ = merge(
of(this.getSavedData()),
searchEvent$
.pipe(
map(event => event.target.value),
filter(Boolean),
debounceTime(1000),
distinctUntilChanged(),
switchMap(search => this.notesService.onSearchNotes(search))
)
);
}
getSavedData() {
const localStorageValue = localStorage.getItem("queryStack") || "[]";
try {
return JSON.parse(localStorageValue);
} catch (ex) {
console.error('Error parsing JSON:', ex);
return [];
}
}
Большое спасибо за вашу помощь @GregL, ваше решение такое элегантное и действительно сработало для меня.
Вы заменяете
searchResult$другой наблюдаемой наof(data). Так что он не собирается излучать что-либо еще после этого.