上FormControl的valueChanges事件运行方法

Question

我有一个角2型预组件下面的代码：

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 */ 
     } 
    ); 
... 

任何协助表示赞赏。

Answer 1

事实证明这是很容易的......要添加自定义代码到开关映射中，您可以简单地执行以下操作。

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() 
    ); 

的技巧，抓住我了这个尝试是return的功能（S）后的请求。

Answer 2

这尚未经过测试，但它类似于我在我的应用程序中使用的代码...希望它能帮助：

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. 
}