rxjs中的fromEvent未按预期工作
rxjs中的fromEvent未按预期工作
提问于 2019-05-29 04:29:14
我已经创建了一个具有搜索功能的组件，它调用api并在页面上显示数据。获得搜索结果后，我将它们存储在localStorage中，以便在您导航回相同的搜索组件页面时恢复数据。在我将存储的数据分配回formEvent可观察结果属性this.searchResult$之前，一切都很正常。问题是，一旦我通过其他途径返回到同一页面，fromEvent就不再触发了。
ngOnInit() {
const searchEvent$ = fromEvent<any>(this.inputSearch.nativeElement, 'keyup').pipe(tap(() => { console.log('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.log(data);
this.searchResult$ = of(data);
}
}Stack Overflow用户
回答已采纳
发布于 2019-05-29 04:41:25
尝试以下方法，将本地存储中保存的任何数据与从服务器获取的结果合并，以响应keyup事件。
// in your imports
import { merge } from 'rxjs';
ngOnInit() {
const searchEvent$ = fromEvent<any>(this.inputSearch.nativeElement, 'keyup').pipe(tap(() => { console.log('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 [];
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56349643
复制相关文章
相似问题
腾讯云开发者
