Angular2表单控件valueChanges可观察完成从未调用

Question

我正在尝试在搜索栏上显示一个简单的加载器,同时进行搜索.我计划在valueChanges我的表单控件的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");
            });
}

Answer 1

这是正常的,因为观察结果永远不会完成.将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

Answer 2

我发现我正在尝试错误的方法。相反，我意识到我debounceTime的可观察对象上有，所以我在输入控件上注册了一个事件，并在其中设置了tokeyup的值，并在我的订阅中将值设置回空字符串。loadingClass"loading"