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

Question

我目前正在尝试在搜索进行时在我的搜索栏上显示一个简单的加载程序。我计划在从我的表单控件观察到的 valueChanges 的订阅回调中将一个变量设置为值“loading”，并在完整的回调中将其设置为一个空字符串。但是，永远不会调用完整的回调。

我也尝试在 finally 上添加一个回调，但它也从未被调用过。

我的代码:

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 确实进行了搜索并返回了一个可观察对象:

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