Angular 在FormControl上运行方法'；s值更改事件

我有以下代码用于Angular 2 type-ahead组件：

this.question["input"] = new FormControl();
this.question["input"].valueChanges
        .debounceTime(400)
        .switchMap(term => this.question['callback'](term))
        .subscribe(
            data => {
                this.question["options"].length = 0;
                this.question["options"].push(...data);
            }
        );

这是伟大的工作，但我试图添加一个加载动画到这个事件，即动画开始时，FormControl的值发生变化，并在数据返回时结束

这么说，有没有一种方法可以通过下面的代码进入这个方法链

...
    .valueChanges
    /* Start Animation or Run Custom Function Here */
    .switchMap(term => /* Run AJAX Here */)
    .subscribe(
        data => {
            /* End Animation Here */
        }
    );
...

---

非常感谢您的帮助。

这还没有经过测试，但它与我在应用程序中使用的代码类似。。。希望有帮助：

this.question["input"] = new FormControl();
this.question["input"].valueChanges
  .debounceTime(400)
  .switchMap(term => this.question['callback'](term))
  .subscribe(
     data => {
        this.question["options"].length = 0;
        this.question["options"].push(...data);
        this.startAnimation();
     },
     () => {this.completeAnimation()}
  );

startAnimation() {
   //start animation code here
}

completeAnimation() {
   //complete the animation here.
}

---

这还没有经过测试，但它类似于我在我的应用程序中使用的代码。。。希望有帮助：

this.question["input"] = new FormControl();
this.question["input"].valueChanges
  .debounceTime(400)
  .switchMap(term => this.question['callback'](term))
  .subscribe(
     data => {
        this.question["options"].length = 0;
        this.question["options"].push(...data);
        this.startAnimation();
     },
     () => {this.completeAnimation()}
  );

startAnimation() {
   //start animation code here
}

completeAnimation() {
   //complete the animation here.
}

---

事实证明这真的很容易。。。要将自定义代码添加到开关映射中，只需执行以下操作

this.question["input"] = new FormControl();
this.question["input"].valueChanges
    .debounceTime(400)
    .switchMap(term => {
        // custom code can go here.
        this.customAnimationStart();
        return this.question['callback'](term);
    })
    .subscribe(
        data => {
            this.question["options"].length = 0;
            this.question["options"].push(...data);
        },
        failed => console.error("Request Failed", failed),
        () => this.customAnimationEnd()
    );

---

这次尝试的诀窍是

在函数之后返回请求。
事实证明，这非常容易。。。要将自定义代码添加到开关映射中，只需执行以下操作

this.question["input"] = new FormControl();
this.question["input"].valueChanges
    .debounceTime(400)
    .switchMap(term => {
        // custom code can go here.
        this.customAnimationStart();
        return this.question['callback'](term);
    })
    .subscribe(
        data => {
            this.question["options"].length = 0;
            this.question["options"].push(...data);
        },
        failed => console.error("Request Failed", failed),
        () => this.customAnimationEnd()
    );

这次尝试的诀窍是
在您的函数之后返回请求。
谢谢您的输入，但这不是我想要的。在您的代码中，
this.startAnimation（）
仅在AJAX调用返回数据后才会触发，并且当
数据=>{…}
块中的代码运行后，它将结束。如上所述，最好在always函数-
（）=>{…}
中使用
this.completeAnimation（）
，因此，即使AJAX调用失败，动画也会结束。是的，这会起作用，但同样不理想，因为这可能不是使用http请求的唯一组件/服务，其他组件/服务如果需要动画，也不会有相同的动画。我将创建一个单独的http服务，使用动画作为解决方案，但我将继续寻找这个问题的答案。。。再次感谢。谢谢你的投入，但这不是我要找的。在您的代码中，
this.startAnimation（）
仅在AJAX调用返回数据后才会触发，并且当
数据=>{…}
块中的代码运行后，它将结束。如上所述，最好在always函数-
（）=>{…}
中使用
this.completeAnimation（）
，因此，即使AJAX调用失败，动画也会结束。是的，这会起作用，但同样不理想，因为这可能不是使用http请求的唯一组件/服务，其他组件/服务如果需要动画，也不会有相同的动画。我将创建一个单独的http服务，使用动画作为解决方案，但我将继续寻找这个问题的答案。。。再次感谢。