我正在尝试在搜索栏上显示一个简单的加载器,同时进行搜索.我已计划在valueShanges observable的subscribe回调中将一个变量从我的表单控件设置为值“loading”,并在完整的回调中将其设置为空字符串.但是,永远不会调用完整的回调.
我也尝试在observable上添加一个回调函数,但它也从未调用过.
我的代码:
searchBox: Control = new Control();
loadingClass: string = "";
constructor() {
this.searchBox.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.subscribe((text: string) => {
this.imageSearch = text;
this.loadingClass = "loading";
}, (err: Error) => {
console.log(err);
}, () => {
this.loadingClass = "";
console.log("test");
});
}
最佳答案:
这是正常的,因为观察结果永远不会完成. valueChanges允许您从搜索框中接收值.实际上,您希望在搜索操作完成时收到通知.
所以我会尝试类似的东西,假设searchImage实际上进行搜索并返回一个observable:
constructor() {
this.searchBox.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.flatMap((text:string) => { // <-------
this.loadingClass = "loading";
return this.searchImage(text);
})
.subscribe((searchResult) => {
this.imageSearch = searchResult;
this.loadingClass = ""; // <----
}, (err: Error) => {
console.log(err);
});
}
有关flatMap运算符的用法,请参阅此文章:
> https://jaxenter.com/reactive-programming-http-and-angular-2-124560.html
原文地址:https://codeday.me/bug/20190516/1115442.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。