我正在尝试在搜索栏上显示一个简单的加载器,同时进行搜索.我已计划在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